JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker" /></p>
JavaScript
$(function() {
var appLocalTimezone = -10;
$( "#datepicker" ).datepicker({
showButtonPanel: true
});
function getAppLocalTimezone() {
return calcTime(appLocalTimezone);
}
// courtesy of http://stackoverflow.com/a/10088053/648350
// function to calculate local time in differnt timezone
function calcTime(offset) {
// create Date object for current location
d = new Date();
// convert to msec
// add local time zone offset
// get UTC time in msec
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
// create new Date object for different city
// using supplied offset
nd = new Date(utc + (3600000*offset));
return nd;
}
// courtesy of http://stackoverflow.com/a/7613795/648350
$.datepicker._gotoToday = function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = getAppLocalTimezone();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
this._setDateDatepicker(target, date);
this._selectDate(id, this._getDateDatepicker(target));
}
this._notifyChange(inst);
this._adjustDate(target);
}
// from jqueryui 1.11.0 source
$.datepicker._generateHTML = function(inst) {
var maxDraw, prevText, prev, nextText, next, currentText, gotoDate,
controls, buttonPanel, firstDay, showWeek, dayNames, dayNamesMin,
monthNames, monthNamesShort, beforeShowDay,...