Convert a Date to UTC using JavaScript

avatar

Borislav Hadzhiev

Sat Jan 15 20223 min read

Convert a Date to UTC using JavaScript #

Use the toUTCString() method to convert a date to UTC, e.g. new Date(localDate.toUTCString().slice(0, -4)). The toUTCString() method converts a date to a string, using the UTC time zone.

index.js
const localDate = new Date(); // ๐Ÿ‘‡๏ธ Sat Jan 15 2022 15:27:13 GMT+0200 (Eastern European Standard Time) console.log(localDate); // โœ… Convert the Date object to UTC const utcDate = new Date(localDate.toUTCString().slice(0, -4)); // ๐Ÿ‘‡๏ธ Sat Jan 15 2022 13:27:13 GMT+0200 console.log(utcDate); // โœ… Get the UTC (string) representation of a Date const utcString = localDate.toUTCString(); console.log(utcString); // ๐Ÿ‘‰๏ธ "Sat, 15 Jan 2022 13:27:13 GMT" // โœ… Get an ISO 8601 formatted UTC string of the date console.log(localDate.toISOString()); // ๐Ÿ‘‰๏ธ "2022-01-15T13:27:13.893Z"

In the first example, we used the toUTCString method to convert a date object to UTC.

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

The utcDate variable stores a Date object that is 2 hours behind localDate. This is because UTC is two hours behind my time zone (Eastern European Standard Time).

If you need to convert the date to a string that uses the UTC time zone, use the toUTCString() method directly.

index.js
const localDate = new Date(); // ๐Ÿ‘‡๏ธ Sat Jan 15 2022 15:27:13 GMT+0200 (Eastern European Standard Time) console.log(localDate); // โœ… Get the UTC representation of a Date const utcString = localDate.toUTCString(); console.log(utcString); // ๐Ÿ‘‰๏ธ "Sat, 15 Jan 2022 13:27:13 GMT"

The toUTCString() method returns a string that represents the given date using the UTC time zone.

The results from the code snippets above GMT.

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.

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 localDate = new Date(); // ๐Ÿ‘‡๏ธ "Sat Jan 15 2022 15:27:13 GMT+0200 (Eastern European Standard Time)" console.log(localDate); // โœ… Get an ISO 8601 formatted UTC string of the date console.log(localDate.toISOString()); // ๐Ÿ‘‰๏ธ "2022-01-15T13:27:13.893Z"

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.

You can also use the available getUTC* methods that return the date and time components according to universal time.

They are quite useful and enable us to format the date and time in many different ways, using string concatenation.
index.js
const date = new Date(); // ๐Ÿ‘‰๏ธ "Sat Jan 15 2022 16:05:47 GMT+0200" console.log(date); // ๐Ÿ‘‡๏ธ returns UTC year of the date console.log(date.getUTCFullYear()); // ๐Ÿ‘‰๏ธ 2022 // ๐Ÿ‘‡๏ธ returns UTC month (0-11) // 0 is January, 11 is December console.log(date.getUTCMonth()); // ๐Ÿ‘‰๏ธ 0 // ๐Ÿ‘‡๏ธ returns UTC day of the month (1-31) console.log(date.getUTCDate()); // ๐Ÿ‘‰๏ธ 15 // ๐Ÿ‘‡๏ธ returns UTC Hour of the date console.log(date.getUTCHours()); // ๐Ÿ‘‰๏ธ 14 // ๐Ÿ‘‡๏ธ returns UTC Minutes of the date console.log(date.getUTCMinutes()); // ๐Ÿ‘‰๏ธ 5 // ๐Ÿ‘‡๏ธ returns UTC Seconds of the date console.log(date.getUTCSeconds()); // ๐Ÿ‘‰๏ธ 47

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

You can use these values to format the UTC date in a way that suits your use case.

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

Here is an example that uses the getUTC* methods to format a Date 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.getUTCMonth() + 1), padTo2Digits(date.getUTCDate()), ].join('-') + ' ' + [ padTo2Digits(date.getUTCHours()), padTo2Digits(date.getUTCMinutes()), padTo2Digits(date.getUTCSeconds()), ].join(':') ); } // ๐Ÿ‘‡๏ธ "2022-01-15 14:09:41" console.log(formatDate(new Date()));

We created a reusable function that formats the date and time as YYYY-MM-DD hh:mm:ss using the UTC time standard.

You could reorder the date components, change the separator to a forward slash /, or make any other changes that suit your use case.

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