How do I specify the time zone when creating a JavaScript Date?

Question

I have a countdown clock that is set to countdown to 8am on January 1, 2014.

I am using the following code to set the date:

var futureDate = new Date(2014, 0, 1, 8, 0, 0, 0);

This works but I would like to take it a step further and set it to a specific timezone. In my case UTC -7.

I have read this answer which says to use:

new Date(Date.UTC(year, month, day, hour, minute, second))

but what I am confused about is how I set the timezone to be UTC -7 and what I read online only leaves me more confused.

Can someone explain how Date.UTC works and how do I set a timezone so my countdown clock is counting down based on the specified timezone?

Note: Any answer must be client side only code.

Solution

Can someone explain how Date.UTC works

Date.UTC creates a timevalue for the provided year, month, date, etc. without any offset. So if the client machine is set for, say, UTC +05:00 then:

var d = new Date(Date.UTC(2013, 11, 30, 12, 0, 0));

will create a date equivalent to noon on 30 December 2013 at Greenwich. Alerting the date will print a local time (assuming +5:00) equivalent to 2013-12-30T17:00:00+05:00.

and how do I set a timezone so my countdown clock is counting down based on the specified timezone?

You can't set the timezone, however you can use UTC values to create a date object, adjust the hours and minutes for the offset, then use the UTC methods to get the date and time components for the countdown.

e.g.

function z(n){return (n < 10? '0' : '') + n;}

var d = new Date(Date.UTC(2012, 11, 30, 12, 0, 0));

d.setUTCHours(d.getUTCHours() - 7);

alert(d.getUTCFullYear() + '-' + z(d.getUTCMonth() + 1) + '-' + 
      z(d.getUTCDate()) + 'T' + z(d.getUTCHours()) + ':' +
      z(d.getUTCMinutes()) + ':' + z(d.getUTCSeconds()) + '-07:00'
);

// 2012-12-30T05:00:00-07:00

If non–UTC methods are used, the local offset will affect the result.

Comments

[Matt Johnson-Pint]

Rob, When formatting an ISO8601 date string, you should not include the characters "UTC" in the output.

[tykowale]

I may be missing something here but why is Date.UTC(2013, 11, 30, 12, 0, 0) in December? Shouldn't it be in November?

[RobG]

@tykowale—months are zero indexed, so 0 is January and 11 is December. :-)

[tykowale]

@RobG Thanks, that is what I was guessing but it seemed weird to index years and days at 1 but months at 0.

[RobG]

@tykowale—days are zero indexed too, 0 is Sunday, 1 is Monday, etc. So are hours, minutes and seconds. ;-)

[Brandon Anzaldi]

I'm a little late to the party, but I'm assuming they meant date, as in day of the month, rather than day as in day of the week. But it makes sense, since both days of the week and months of the year have a common string representation, as opposed to the day of the month, which is always a number. So, should you use those values to access a key in an array, you need not subtract one from the value. E.g. var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; console.log(days[new Date().getDay()] // "Wednesday"