jQuery UI DatePicker change highlighted “today” da

Question

I would like to explicitly change the highlighted today's date in jQuery Datepicker. I've tried setting the default date but still the highlighted date is my local computer's date which is today.

I would like to do this because I am using a custom timezone. Basically the current year/month/date in this custom timezone is different than my local computer's current date.

Eg.

Say today's date is 07/10/2014 same with my computer's date, but using a custom timezone, the today's date highlighted should be 07/09/2014:

Answer 1

Small tweak to @haxxxton's that allows you to pass in the localToday as an option in the datepicker.

// Get users 'today' date
var localToday = new Date();
localToday.setDate(tomorrow.getDate()+1); // tomorrow

// Pass the today date to datepicker
$( "#datepicker" ).datepicker({
    showButtonPanel: true,
    localToday: localToday    // This option determines the highlighted today date
});

I've overridden 2 datepicker methods to conditionally use a new setting for the "today" date instead of a new Date(). The new setting is called localToday.

Override $.datepicker._gotoToday and $.datepicker._generateHTML like this:

$.datepicker._gotoToday = function(id) {
    /* ... */
    var date = inst.settings.localToday || new Date()
    /* ... */
}

$.datepicker._generateHTML = function(inst) {
    /* ... */
    tempDate = inst.settings.localToday || new Date()
    /* ... */
}

Here's a demo which shows the full code and usage: http://jsfiddle.net/NAzz7/5/

Answer 2

Unfortunately, 'Today' is calculated at the HTMLRendering stage of the DatePicker, this means that in order to 'override' you need to redefine the _generateHTML method of $.datepicker. Ive also found that the 'Today' button in it's default state gets broken by this override, so it is necessary to override that method too.

Basically the datepicker sets an internal variable like this 'tempDate = new Date()' and then uses that to create 'today'. All we do is override that variable with some timezone offsetting code, and the rest sorts itself out.

In the below demo, at the top is a variable for appLocalTimezone, set this to your desired timezone and it will updated the datepicker based on the app. All credit for original code/answers are in the fiddle

jsFiddle Demo

Answer 3

use $( ".selector" ).datepicker({ defaultDate: -1 });