Convert GMT to local time using JavaScript

avatar

Borislav Hadzhiev

Sat Jan 15 20223 min read

banner

Photo by Tim Marshall

Convert GMT to local time using JavaScript #

Use the toLocaleString() method to convert GMT to local time, e.g. new Date().toLocaleString(). When no parameters are passed to the method, it returns a string formatted according to the visitor's locale and time zone.

index.js
// ๐Ÿ‘‡๏ธ can be any valid GMT date/ date+time string const dateStr = 'Sat, 15 Jan 2021 09:24:00 GMT'; const date = new Date(dateStr); // ๐Ÿ‘‡๏ธ "Fri Jan 15 2021 11:24:00 GMT+0200 (Eastern European Standard Time)" console.log(date); // โœ… get date and time in the visitor's default locale console.log(date.toLocaleString()); // ๐Ÿ‘‰๏ธ "1/15/2021, 11:24:00 AM" // โœ… Get LOCAL (visitor's time zone) date and time components const hours = date.getHours(); console.log(hours); // ๐Ÿ‘‰๏ธ 11 const minutes = date.getMinutes(); console.log(minutes); // ๐Ÿ‘‰๏ธ 24 const seconds = date.getSeconds(); console.log(seconds); // ๐Ÿ‘‰๏ธ 0

We used the Date.toLocaleString method to convert GMT to locale time.

When no parameters are passed to the method, it returns a string that is formatted according to the user's default locale and time zone.
index.js
// ๐Ÿ‘‡๏ธ "1/15/2022, 11:42:10 AM" console.log(new Date().toLocaleString());

The comments above illustrate the formatting if the methods were run with a time zone of Eastern European Standard Time.

The output you see will be different, depending on your default locale and default time zone.

Note that you can use any of the get* methods to get any of the date and time components of a date according to the visitor's local time.

All of the methods in the code snippet below return the date / time component according to the visitor's time zone and will yield different results when accessed in different time zones.
index.js
const date = new Date(); // ๐Ÿ‘‡๏ธ returns Hour of the date console.log(date.getHours()); // ๐Ÿ‘‰๏ธ 11 // ๐Ÿ‘‡๏ธ returns Minutes of the date console.log(date.getMinutes()); // ๐Ÿ‘‰๏ธ 46 // ๐Ÿ‘‡๏ธ returns Seconds of the date console.log(date.getSeconds()); // ๐Ÿ‘‰๏ธ 6 // ๐Ÿ‘‡๏ธ returns year of the date console.log(date.getFullYear()); // ๐Ÿ‘‰๏ธ 2022 // ๐Ÿ‘‡๏ธ returns month (0-11) // 0 is January, 11 is December console.log(date.getMonth()); // ๐Ÿ‘‰๏ธ 0 // ๐Ÿ‘‡๏ธ returns day of the month (1-31) console.log(date.getDate()); // ๐Ÿ‘‰๏ธ 15

All of the get* methods return the date or time component according to the visitor's local date and time.

Note that the getMonth method returns the month of the specified date as a zero-based value (0 = January, 1 = February, etc.)

If you need a complete list of the Date.get* methods, visit the MDN docs.

You can use these methods to format the local date and time to the user in many different ways.

Here is an example that formats the local date and time as YYYY-MM-DD hh:mm:ss.

index.js
function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function formatDate(date) { return ( [ date.getFullYear(), padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), ].join('-') + ' ' + [ padTo2Digits(date.getHours()), padTo2Digits(date.getMinutes()), padTo2Digits(date.getSeconds()), ].join(':') ); } const dateStr = 'Sat, 15 Jan 2021 09:24:00 GMT'; // ๐Ÿ‘‡๏ธ 2022-01-15 14:24:00 (yyyy-mm-dd hh:mm:ss) console.log(formatDate(new Date(dateStr)));

We joined the date components of the date with a hyphen separator and the time components with a colon separator.

You could reorder the date components, change the separator to a forward slash / or tweak this function in any way that suits your use case.

Note that, most likely, you shouldn't be storing local date and times in your database.

For consistency, you should mostly use local time when you have to render a date and time to the user, but store the actual values in UTC.

For example, if you store a local time of midnight (00:00) in your database, you wouldn't know if that's midnight in Tokyo (Japan), in Paris (France), in New York (US), etc. These are all different moments that are hours apart.

There is a UTC equivalent for all of the get* methods we previously covered, e.g. getUTCFullYear vs getFullYear.

All of the getUTC* methods return the date or time component according to universal time.

If you need a complete list of the getUTC* methods, visit the MDN docs.

The getUTC* methods return the date or time component according to universal time, whereas the get* methods return them according to local time (the time zone the visitor's computer is in).

The get* methods return different results depending on where the user visits your site from.

Use the search field on my Home Page to filter through my more than 1,000 articles.

Copyright ยฉ 2022 Borislav Hadzhiev