Javascript countdown using absolute timezone?

Question

I have a javascript countdown timer that works by taking a specified date and time, and comparing it to the current date and time. The issue is, the current time is relative to the users timezone, so the time remaining is different between users.

How can I have the timer countdown till a time in a specific timezone, in my case GMT -5 hours?

I understand i can use the below code to get the users timezone, but I am lost as how to use this.

myDateObj.getTimezoneOffset( ) / 60

score 10 · Answer 1 · answered Jan 10 '12 at 17:58

10

You can use Date.UTC(year,month,day,hours,minutes,seconds,msec)

It operates just like the Date constructor, but returns the timestamp of the arguments at Greenwich time (offset=0) instead of local time.

var localtime=new Date(Date.UTC(year,month,day,hours,minutes,seconds,msec))

returns the local time for the UTC time specified.

Everyone (whose clock is set correctly) will end the countdown together.

answered Jan 10 '12 at 17:58

kennebec

102,654
32
106
127

This is the better answer – Michael Sep 07 '18 at 21:36
Super simple and works flawlessly, thanks! – fgilio Dec 19 '20 at 13:32

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

A quick search reveals: convert-the-local-time-to-another-time-zone-with-this-javascript

Following the article verbatim gets you this example:

var d = new Date();

var localTime = d.getTime();

var localOffset = d.getTimezoneOffset() * 60000;

var utc = localTime + localOffset;

// obtain and add destination's UTC time offset
// for example, Bombay 
// which is UTC + 5.5 hours
var offset = 5.5;   
var bombay = utc + (3600000*offset);

var nd = new Date(bombay); 
alert("Bombay time is " + nd.toLocaleString() + "<br>");

jsFiddle: http://jsfiddle.net/GEpaH/

Just update with your desired offset and you should be all set.

score 3 · Answer 3 · edited Oct 07 '21 at 05:59

3

Just create a Date with an RFC 2822-timestamp with timezone. That time will then be converted to the users current location (based on OS settings). Even with corrections for daylight savings time!

I'm in Norway, which currently is in daylight savings time, so it's GMT+2. Here is what happens when I create a Date object using GMT-0500:

var myDateObj = new Date("Fri Apr 17 2015 12:00:00 GMT-0500 (CDT)");
myDateObj.toString();

Fri Apr 17 2015 19:00:00 GMT+0200 (CEST)

How to get the correct date string for your location? If it's the timezone you're currently in; just do myDateObj.toString() in your browsers dev-tools console. For a different timezone; change the timezone in your operating system first. (Or read the RFC)

new Date().toString();

Fri Apr 17 2015 12:36:57 GMT+0200 (CEST)

edited Oct 07 '21 at 05:59

Community

1
1

answered Apr 17 '15 at 10:50

gregers

12,523
8
46
41

1

"Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies." - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date – Fabian Aug 03 '16 at 19:23
This is the right solution for my dilemma, I love it thanks! – crystallove18 Mar 23 '21 at 23:23

score 0 · Answer 4 · answered Sep 30 '12 at 21:43

You can't get an accurate date with JavaScript as it is client-side and it is based on the user's operating system clock. You can use jCounter to display countdowns based on server-side timezones.

But hey, if you really want to do it yourself, download jCounter and you'll find a dateandtime.php file as well which retrieves the current date server-side, as timestamp (it will have to be placed on a server btw, not on your desktop :P)

Check how that script uses that file and retrieves the real current date to operate against it and calculate accurate countdowns.

Cheers

score 0 · Answer 5 · answered Apr 07 '16 at 05:05

To revise the approach Brandon has taken to calculate a UTC-shifted time, we can slim the code down into a two-line extension of the Date object:

/* getOffsetDate - Returns a Date shifted by a certain offset 
 * @param offset the UTC offset to shift, in hours
 * @return new date object shifted by UTC offset
 */
Date.prototype.getOffsetDate = function( offset ) {
  utc = this.getTime() + (this.getTimezoneOffset() * 60000);
  return new Date(utc + (3600000*offset));
}

You can then calculate the UTC-5 shifted date as follows:

myDate = new Date().getOffsetDate(-5);

It should be noted that extending native prototypes in this manner is generally considered a bad practice since it muddles core objects that other libraries depend upon. To justify it, you'd have to argue this functionality should be a native part of the Date object.

score 0 · Answer 6 · answered Jan 10 '12 at 15:45

You don't really say exactly what your are trying to accomplish. The javascript date object retrieves the local time and the "timezone offset" (relative to GMT (UTC)). These are of course "set" by the user so even if in the same time zone, two users are very unlikely to have the same "time".

If you are trying to time between different users you need to be referencing some centralized time authority.

I would use an AJAX type call (XMLHttpRequest) to a page own my own server that returns my server's time. That way each user is referencing the same time.

Google XMLHttpRequest to find examples of the JS code you need (and oftentimes the corresponding server-side code for a simple service such as this).

PS: I would also install some simple client software to keep the time on my server accurate by synching with an atomic clock every 10 minutes.

Javascript countdown using absolute timezone?

6 Answers6

Linked