Convert local time to UTC using JavaScript

avatar

Borislav Hadzhiev

Sat Jan 15 20223 min read

banner

Photo by Romain Lours

Convert local time to UTC using JavaScript #

Use the toUTCString() method to convert local time to UTC, e.g. new Date().toUTCString(). The toUTCString() method converts a date to a string, using the UTC time zone.

index.js
const date = new Date(); // ๐Ÿ‘‡๏ธ Sat Jan 15 2022 16:49:31 GMT+0200 console.log(date); const utcStr = date.toUTCString(); console.log(utcStr); // ๐Ÿ‘‰๏ธ "Sat, 15 Jan 2022 14:49:31 GMT" // ๐Ÿ‘‡๏ธ "14:49:31" console.log( [ padTo2Digits(date.getUTCHours()), padTo2Digits(date.getUTCMinutes()), padTo2Digits(date.getUTCSeconds()), ].join(':'), ); function padTo2Digits(num) { return num.toString().padStart(2, '0'); }

We used the toUTCString to convert a local time to UTC.

The date variable stores the date in my local time, which is UTC+0200.

When I convert the date and time to UTC, I get a result that is 2 hours behind, because my time zone (Eastern European Standard Time) is 2 hours behind UTC.

If you need a new Date object with the UTC time instead of a string, use this approach instead.

index.js
const date = new Date(); const utcDate = new Date(localDate.toUTCString().slice(0, -4));

We basically sliced off the GMT part of the UTC string and passed the result to the Date() constructor.

You could also use the toISOString() method to get a string in the ISO 8601 format of YYYY-MM-DDTHH:mm:ss.sssZ.

The Z at the end of the format means UTC, that is, an offset from UTC of zero hours, minutes and seconds.

index.js
const date = new Date(); const isoStr = date.toISOString(); console.log(isoStr); // ๐Ÿ‘‰๏ธ "2022-01-15T14:49:31.612Z"

The toISOString method returns a string representing the date in the ISO 8601 format, according to universal time.

ISO 8601 formatted strings are commonly used to store date and time on the server.

If you only need the time in UTC, you can use the following function, which formats the UTC time as hh:mm:ss.

index.js
const date = new Date(); function padTo2Digits(num) { return num.toString().padStart(2, '0'); } function getGMTTime(date = new Date()) { return [ padTo2Digits(date.getUTCHours()), padTo2Digits(date.getUTCMinutes()), padTo2Digits(date.getUTCSeconds()), ].join(':'); } console.log(getGMTTime()); // ๐Ÿ‘‰๏ธ๏ธ "14:49:31"

We created a reusable function that returns the time in GMT, formatted as hh:mm:ss.

The function takes a date object by default, but if one isn't provided it returns the current UTC time.

The getUTCHours method returns the hour (0 - 23) for the specified date, according to universal time.

The getUTCMinutes method returns the minutes (0 - 59) for the date, according to universal time.

The getUTCSeconds method returns the seconds (0 - 59) for the date, according to universal time.

If you need to use any of the other getUTC* methods, e.g. getUTCMonth, visit the MDN docs.

In the function, we made sure to display the hours, seconds and minutes as 2 digits, even when they are less than 10.

By default, if any of the values is less than 10, the methods return a single digit, which is not what we want.

We padded the results if necessary and joined them with a colon separator.

You can adjust this depending on your use case, e.g. include the year, month, day of the month values in the formatted string.

There is a non-UTC equivalent for each of these methods, for example getUTCFullYear vs getFullYear.

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.

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.

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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee