I have the following code which works fine until the datepicker reaches BST.

var i;
function showEventDates(date) {
  for (i = 0; i < startDates.length; i++) {
    if (date.getTime() == startDates[i]) {
      return [true, 'eventDay'];
    }
  }    
  return [false, ''];
}
var startDates = new Array();

$("select.startdates").find("option").each( function() {
  startDates.push(Date.UTC.apply(Date, this.value.split(",").map(Number)));
});

$('#mydate').datepicker({
    beforeShowDay: showEventDates
});

During BST the line if (date.getTime() == startDates[i]) { returns false because there's an hour difference.

Any ideas how I can get these to match? I think it's the datepicker time that's not UTC.

EDIT:

An example of an option from select.startdates is

<option value="2013, 2, 1">01/03/2013</option>

I have the following code which works fine until the datepicker reaches BST.

var i;
function showEventDates(date) {
  for (i = 0; i < startDates.length; i++) {
    if (date.getTime() == startDates[i]) {
      return [true, 'eventDay'];
    }
  }    
  return [false, ''];
}
var startDates = new Array();

$("select.startdates").find("option").each( function() {
  startDates.push(Date.UTC.apply(Date, this.value.split(",").map(Number)));
});

$('#mydate').datepicker({
    beforeShowDay: showEventDates
});

During BST the line if (date.getTime() == startDates[i]) { returns false because there's an hour difference.

Any ideas how I can get these to match? I think it's the datepicker time that's not UTC.

EDIT:

An example of an option from select.startdates is

<option value="2013, 2, 1">01/03/2013</option>

• javascript
• jquery
• jquery-ui
• jquery-ui-datepicker
• utc

• The time might be localized, I'll go look at the doc – Hugo Dozois Commented Feb 19, 2013 at 16:23
• @HugoDozois - Yeah... any idea how I can "unlocalize" it?? – Tom Commented Feb 19, 2013 at 16:25
• @Tom: the getTimezoneOffset method of the Date object returns the offset in minutes. You can use that to convert a local date to UTC. – Martijn Commented Feb 19, 2013 at 17:16
• @Martijn: that sounds good. I've fried my brain looking at this now. Can you give a hint as to how I'd use that? – Tom Commented Feb 19, 2013 at 17:23

3 Answers 3

It looks like the datepicker doesn’t return UTC dates, but local ones (which is actually the default in Javascript).

To convert your constructed dates to local time:

$("select.startdates").find("option").each( function() {
  var d = Date.UTC.apply(Date, this.value.split(",").map(Number));
  d = d + new Date(d).getTimezoneOffset() * 60000; // convert UTC to local
  startDates.push(d);
});

Normally, I’d use the new Date(year, month, day) constructor instead of the Date.UTC function, but you can’t use apply with the Date constructor.

If you’d rather leave your startDates array in UTC, then you need to convert the datepicker’s dates to UTC:

function showEventDates(date) {
  date = date - new Date(date).getTimezoneOffset() * 60000; // convert local to UTC
  // for ...
}

NB: choose one or the other of these methods, not both, or you’ll end up with the same problem... :-)

I hear there are some timezone updates to the jQuery datetimepicker so you may want to check the site first, however here is what I did to get the selected date & time in UTC format.

First create the datetimepicker and use cities instead of +0500 GMT because if you use GMT offsets you have to take into account daylight savings - and that is a nightmare.

 // create ye datetimepicker with timezone options 
 $('#datetimepicker').datetimepicker({
    showTimezone: true,
    onSelect: onSelect,
    timezoneList: [
      { value: 'America/New_York', label: 'New York'},
      { value: 'America/Chicago', label: 'Chicago' } ,
      { value: 'America/Denver', label: 'Denver' },
      { value: 'America/Los_Angeles', label: 'Los Angeles' }
    ]);

Next, grab the timezoneJS.Date library from mde on Github (NOTE: you will also need to download the appropriate timezone files for your region, just follow the README instructions)

Now when the user selects a date the onSelect method gets called.

function onSelect(dateText, dateInst) {
  // get the date without the timezone data
  var d = $('#datetimepicker').datepicker('getDate');

  // init timezoneJS
  timezoneJs.timezone.zoneFileBasePath = '/tz';
  timezoneJs.timezone.init();

  // get the selected timezone
  var tz = $('#datetimepicker').data('datepicker').settings.timepicker.timezone

  // construct the utcDate with the help of the timezoneJS.Date lib
  var utcDate = new timezoneJS.Date(
    d.getFullYear(),
    d.getMonth(),
    d.getDate(),
    d.getHours(),
    d.getMinutes(),
    tz)
  var utcLinuxTimestamp = utcDate.getTime() / 1000    
}

Not exactly painless, but it takes care of the daylight savings stuff for you.

The reverse of this to populate a datetimepicker with a date and a timezone from a UTC timestamp looks like this:

// init timezone JS
timezoneJs.timezone.zoneFileBasePath = '/tz';
timezoneJs.timezone.init();

// get timezone date JS object
var tz = 'America/New York';
var d = new timezoneJS.Date( timestamp * 1000, tz);

$('#datetimepicker').datetimepicker({
  showTimezone: true,
  timezoneList: [ 
      { value: 'America/New_York', label: 'New York'},
      { value: 'America/Chicago', label: 'Chicago' } ,
      { value: 'America/Denver', label: 'Denver' },
      { value: 'America/Los_Angeles', label: 'Los Angeles' }
    ],
  timezone: tz,
  defaultDate: d._dateProxy,
  onSelect: onSelect
}).datepicker('setDate',d._dateProxy);

I'm not certain if you need the setDate part on the last line, but couldn't hurt.

based on @Martijn ment:

var offset = date.getTimezoneOffset();

if (date.getTime() - offset == startDates[i]) 
{
      return [true, 'eventDay'];
}