Convert a GMT/UTC date and time to CST using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jan 15, 2022

banner

Photo from Unsplash

Convert a GMT/UTC date and time to CST using JavaScript #

Use the toLocaleString() method to convert a GMT/UTC date and time to CST, e.g. date.toLocaleString('en-US', {timeZone: 'CST'}). The method can be passed the locale and the CST time zone as parameters and returns a string that represents the date according to the provided values.

index.js
// 👇️ Example date in GMT/UTC const date = new Date('2022-01-15T11:02:17Z'); // ✅ convert date to CST (Central Standard Time) console.log( date.toLocaleString('en-US', { timeZone: 'CST', }), ); // 👉️ "1/15/2022 5:02:17 AM"

GMT and UTC share the same current time. The difference between them is that GMT is a time zone, whereas UTC is a time standard and is the basis for time zones worldwide.

UTC and GMT don't change for Daylight Saving Time (DST) and always share the same current time.

We used the Date.toLocaleString method to convert a GMT/UTC date and time to CST.

The two parameters we passed to the toLocaleString method are:

  1. 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.
  2. options object where we specified the timeZone property and set it to CST. Read more about the options object in the MDN docs.

You can use the different properties on the options object to render the CST date and time in different ways.

index.js
const date = new Date('2022-01-15T11:02:17Z'); // ✅ convert date to CST (Central Standard Time) console.log( date.toLocaleString('en-US', { timeZone: 'CST', dateStyle: 'full', timeStyle: 'full', }), ); // 👉️ "Saturday, January 15, 2022 at 5:02:17 AM Central Standard Time"

We set the dateStyle and timeStyle properties in the options object to full to get the full name of the CST date and time.

Other possible values for the two properties are: long, medium and short.

index.js
console.log( date.toLocaleString('en-US', { timeZone: 'CST', dateStyle: 'short', timeStyle: 'short', }), ); // 👉️ "1/15/22, 5:02 AM"

You can view all of the properties and values the options object implements 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.

index.js
console.log( date.toLocaleString('en-US', { timeZone: 'CST', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short', }), ); // 👉️ "01/15/2022, 05:02:17 AM CST"

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.

If that's the case, the values get padded with a leading zero.

We also set the timeZoneName property to the value of short, to show the CST time zone at the end of the result.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.