Get Set Change Timezone In Javascript Date – Simple Examples

Welcome to a tutorial on how to get, set, and change the timezone in Javascript. Confused over how timezone works in Javascript? Here is a quick snippet to explain the mystery:

  1. To set the timezone for a date object, we can either specify the timezone in the date string or create from a UTC date.
    • var dateA = new Date("2019-08-07 10:00:00 GMT+0800");
    • var dateB = new Date(Date.UTC(2019, 08, 07, 10));
  2. To change or get the date-time in another timezone, we can use the toLocaleString() function.
    • var dtUTC = dateA.toLocaleString('en-US', { timeZone: 'UTC' })
    • var dtTOKYO = dateB.toLocaleString('en-US', { timeZone: 'Asia/Tokyo' });

That covers the basics, but read on for more examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes JS Timezone Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

JAVASCRIPT TIMEZONE

All right, let us now get into the examples of getting and setting the timezone in Javascript.

 

1) DEFAULT TIMEZONE

1-default-timezone.html
// (A) CURRENT DATE-TIME ON USER'S DEVICE
var dateA = new Date(); 
console.log(dateA);
 
// (B) SPECIFY DATE-TIME, BUT DEFAULT TO USER'S TIMEZEONE
var dateB = new Date("10 Nov 2012 20:00:00");
console.log(dateB);

Let us start with something simple –

  • When we create a new Date() object, it will default to the current date/time on the user’s device.
  • But take extra note when we parse a date/time string – new Date("10 Nov 2012 20:00:00"). Since the timezone is not specified, it will default to the user’s location.
  • For example, if the user is in Tokyo (GMT+9), this will be 10 Nov 2012 8 PM UTC+9. If the user is from London (GMT), it will be 10 Nov 2012 8 PM GMT… That is a big difference, and a common pitfall among beginners.

 

 

2) SETTING THE TIMEZONE

2-set-timezone.html
// (A) SPECIFY DATE, TIME, TIMEZONE
var dateC = new Date("10 Nov 2012 20:00:00 UTC+0400");
console.log(dateC);
 
// (B) CREATE DATE OBJECT BASED ON UTC
var dateD = new Date(Date.UTC(2019, 8, 7, 6));
console.log(dateD);

As in the above introduction, we can set the timezone by:

  • Specifying the timezone in the date string – UTC+HHHH OR GMT+HHHH.
  • Or using Date.UTC() to create the date object.

 

3) CHANGING THE TIMEZONE

3-change-timezone.html
// FOR LIST OF TIMEZONES
// https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

// (A) CREATE DATE OBJECT
var dateObj = new Date("2 Mar 2004 05:00:00 UTC");

// (B) "ORIGINAL DATE" IN UTC
var dateA = dateObj.toLocaleString('en-US', { timeZone: 'UTC' });
console.log("UTC: " + dateA);

// (C) TOKYO TIME (UTC+9)
var dateB = dateObj.toLocaleString('en-US', { timeZone: 'Asia/Tokyo' });
console.log("Tokyo UTC+9: " + dateB);

// (D) ANCHORAGE TIME (UTC-9)
var dateC = dateObj.toLocaleString('en-US', { timeZone: 'America/Anchorage' });
console.log("Anchorage UTC-9: " + dateC);

// NOTE: TOLOCALESTRING() SIMPLY RETURNS A FORMATTED STRING
// IT DOES NOT CHANGE THE TIMEZONE OF THE OBJECT
console.log(typeof dateA);
console.log(typeof dateB);
console.log(typeof dateC);
console.log(typeof dateObj);

As in the introduction again, if we need to change or get the date/time for another timezone:

  • Parse the “original date” into new Date() object first.
  • Then just use toLocaleString("LOCALE", { timeZone: "TIMEZONE" }) to help get the specified local time.
  • Check out Wikipedia for the full list of timezones.

That’s all, but please take note that toLocaleString() simply formats and returns a string – It does not change the timezone nor do anything to the original date object.

 

 

4) GET TIMEZONE OFFSET

4-get-offset.html
// (A) CREATE DATE OBJECT
var dateObj = new Date();
 
// (B) GET TIMEZONE OFFSET - IN MINUTES
// E.G. GMT+8 = -480 MINUTES
// E.G. GMT-4 = +240 MINUTES
var offset = dateObj.getTimezoneOffset();
console.log(offset);

For you guys who want to do some manual calculations, we can get the timezone offset (in minutes) using the getTimezoneOffset() function. Tale note though – This function does not return the timezone offset of the date object, but always returns the offset based on the client’s timezone. Follow up with the last example if you are interested to know why.

 

5) SET TIMEZONE OF DATE OBJECT?

So why does the getTimezoneOffset() always return the client device’s timezone offset? Why can’t we directly change the timezone of a date object? This has somehow caused major confusion among some code ninjas, but let’s put it this way:

5-unix.html
// (A) CREATE DATE OBJECTS
var dateA = new Date("2019-08-07 02:00:00 UTC");
var dateB = new Date("2019-08-07 06:00:00 UTC+0400");
 
// (B) DATE OBJECTS ARE BASED ON UNIX TIMESTAMP "INTERNALLY"
console.log(dateA.valueOf()); // 1565143200000
console.log(dateB.valueOf()); // 1565143200000
console.log(dateA.getTime() == dateB.getTime()); // true

As at the time of writing –

  • Date objects in Javascript are based on Unix Timestamps internally.
  • We can specify any date string with any timezone, Javascript simply parses that into a Unix Timestamp.
  • Date objects do not hold any information on timezones.
  • There is no DATE.setTimezoneOffset() function either.
5-unix.html
// (C) CONSOLE LOG WILL OUTPUT THE DATE IN TIMEZONE BASED ON DEVICE LOCALE
console.log(dateObj);
 
// (D) THE OFFSET IS ALWAYS BASED ON THE DEVICE LOCALE AS WELL
var offset = dateObj.getTimezoneOffset();
console.log(offset);

So since the date object does not hold any timezone information, using functions like console.log(), getHours(), getMinutes(), getTimezoneOffset() will always be based on the client’s timezone.

 

 

USEFUL BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Get & Set Timezone In Javascript (click to enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *