3

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:

enter image description here

Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
superigno
  • 994
  • 2
  • 12
  • 24
  • 1
    possible duplicate of [jQuery datepicker - change "today" date?](http://stackoverflow.com/questions/2516199/jquery-datepicker-change-today-date) – Cory Danielson Apr 27 '15 at 21:29
  • 1
    Also a dup of http://stackoverflow.com/questions/15005263/how-to-change-default-highlighted-date-in-datepicker? – Cory Danielson Apr 28 '15 at 01:06

3 Answers3

3

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

haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • Whew, my eyes hurt after seeing the _generateHTML override. It works though so I'm accepting this answer unless there really is a better way. Thanks! – superigno Jul 10 '14 at 04:08
  • 1
    @gino yeah like i said, its unfortunate that its calculated DURING the render stage :( – haxxxton Jul 10 '14 at 04:16
2

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/

Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
0

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

Tahir Jamil
  • 11
  • 1
  • 1
    this just changes which date is automatically selected when the datepicker is opened (from docs: "Set the date to highlight on first opening if the field is blank."). OP is asking how to override which date is set as 'Today' – haxxxton Jul 10 '14 at 02:25