Borislav Hadzhiev
Last updated: Jul 25, 2022
Photo from Unsplash
Use the toLocaleString()
method to initialize a date with time zone, e.g.
date.toLocaleString('en-US', { timeZone: 'America/Los_Angeles'})
. The method
can be passed the locale and the time zone as parameters and returns a string
that represents the date according to the provided values.
const date = new Date(); // ✅ Get a string according to a provided Time zone console.log( date.toLocaleString('en-US', { timeZone: 'America/Los_Angeles', }), ); // 👉️ "1/15/2022, 11:54:44 PM" console.log( date.toLocaleString('de-DE', { timeZone: 'Europe/Berlin', }), ); // 👉️ "16.1.2022, 08:54:44" // ✅ Or get a Date object with the specified Time zone function changeTimeZone(date, timeZone) { if (typeof date === 'string') { return new Date( new Date(date).toLocaleString('en-US', { timeZone, }), ); } return new Date( date.toLocaleString('en-US', { timeZone, }), ); } const laDate = changeTimeZone(new Date(), 'America/Los_Angeles'); console.log(laDate); // 👉️ "Sun Jan 15 2022 11:54:44" const berlinDate = changeTimeZone(new Date(), 'Europe/Berlin'); console.log(berlinDate); // 👉️ "Sun Jan 16 2022 08:54:44"
The Date object in JavaScript does not store a time zone.
However, we can use the toLocaleString method to get a locale-specific string that is adjusted to a time zone.
The two parameters we passed to the toLocaleString
method are:
locales
- a string with a BCP 47 language tag or an array of such strings.
You can use any of the available locales, e.g. es-MX
for Mexico or en-CA
for Canada. If you need more information about this parameter, check out the
MDN docs.options
object where we specified the timeZone
property. Read more about
the options
object in the
MDN docs.You can find a table of the country codes and time zone database names by visiting this wikipedia page.
The second example shows how to get a Date
object that has its date and time
set according to the provided time zone.
function changeTimeZone(date, timeZone) { if (typeof date === 'string') { return new Date( new Date(date).toLocaleString('en-US', { timeZone, }), ); } return new Date( date.toLocaleString('en-US', { timeZone, }), ); } const laDate = changeTimeZone(new Date(), 'America/Los_Angeles'); console.log(laDate); // 👉️ "Sun Jan 15 2022 11:54:44" const berlinDate = changeTimeZone(new Date(), 'Europe/Berlin'); console.log(berlinDate); // 👉️ "Sun Jan 16 2022 08:54:44"
The changeTimeZone
function can be passed a Date
object or a date string and
returns a Date
object that has the date and time of the provided time zone.
However, even though the date and time in the date object correspond to the time
zone, the Date
object in JavaScript has no way of storing a specific time
zone.
toLocaleString
method to get a string that represents the time zone and use the options
object parameter to format the string according to your needs.You can use the different properties on the options
object of the
toLocaleString
method to format the date and time for the specific time zone
in different ways.
const date = new Date(); console.log( date.toLocaleString('en-US', { timeZone: 'America/Los_Angeles', dateStyle: 'full', timeStyle: 'full', }), ); // 👉️ "Sunday, January 16, 2022 at 12:14:15 AM Pacific Standard Time"
We set the dateStyle
and timeStyle
properties in the options
object to
full
to get a more verbose representation of the date and time.
Other possible values for the two properties are: long
, medium
and short
.
const date = new Date(); console.log( date.toLocaleString('en-US', { timeZone: 'America/Los_Angeles', dateStyle: 'short', timeStyle: 'short', }), ); // 👉️ "1/16/22 12:15 AM"
You can view all of the properties and values the options
object contains by
visiting the
MDN docs.
Here is an example that shows the month, day, hours, minutes and seconds as
2-digits, even if their values are less than 10
.
const date = new Date(); console.log( date.toLocaleString('en-US', { timeZone: 'America/Los_Angeles', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short', }), ); // 👉️ "01/16/2022, 12:17:00 AM PST"
By setting the values of the date and time components to 2
digits, we format
them consistently, even if they have a value of less than 10
.
In that case, the values get padded with a leading zero.
We also set the timeZoneName
property to a value of short
, to show an
abbreviation of the time zone name at the end of the result.
Date
object tracks time in UTC internally, but most of its methods (except the ones with UTC in their name) return output in the local time of the visitor (the time zone the visitor's computer is in).A best practice is to store a UTC timestamp or a ISO 8601 string in your database and use local time when you have to render a date and time to the user.
An exception to this rule is if, for example, you have a local business and all of your visitors come from the same time zone, then you can store time zone specific date and time in your database.