31

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.

Community
  • 1
  • 1
L84
  • 45,514
  • 58
  • 177
  • 257
  • 1
    Javascript Date objects use UTC. The timezone is used only to produce local values for date and time parts. While you can't set the offset, you can manually produce time values for a specific offset using the UTC functions and adding or subtracting the offset you want. – RobG Dec 30 '13 at 06:39
  • 2
    UTC-7 is not a time zone, it's a time zone *offset*. There is a huge difference. Please read the [timezone tag wiki](http://stackoverflow.com/tags/timezone/info). Also, you might want to read [this related answer](http://stackoverflow.com/a/15171030/634824). – Matt Johnson-Pint Dec 31 '13 at 06:18
  • If you need to set a timer in a client that is synced to the server, then you would need to use the server time to set a date reference on the local client, the local client will already be in a situation where theirs a timezone offset and if they observe daylight savings, this will already be accounted for. You need to know a few things about the timezone that the client is in, how far from GMT are they, how far from GMT is your server... not as simple as setting a timezone offset as you can easily be compounding a problem and not resolving one. – Mark Giblin Feb 11 '17 at 11:29

1 Answers1

47

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.

RobG
  • 142,382
  • 31
  • 172
  • 209
  • Rob, When formatting an ISO8601 date string, you should *not* include the characters "UTC" in the output. – Matt Johnson-Pint Dec 31 '13 at 06:16
  • 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? – tykowale Dec 09 '15 at 20:54
  • 8
    @tykowale—months are zero indexed, so 0 is January and 11 is December. :-) – RobG Dec 09 '15 at 21:10
  • @RobG Thanks, that is what I was guessing but it seemed weird to index years and days at 1 but months at 0. – tykowale Dec 10 '15 at 14:35
  • @tykowale—days are zero indexed too, 0 is Sunday, 1 is Monday, etc. So are hours, minutes and seconds. ;-) – RobG Dec 10 '15 at 21:03
  • 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"` – Brandon Anzaldi Apr 21 '16 at 00:54