Iso 8601 to local time javascript

You can simply pass this format to the Date object constructor (or to Date.parse).

var d = new Date("2019-03-15T22:32:04.9143842Z");

The Z on the end is critical, as it indicates UTC.

You can then use functions like .toString() or .toLocaleString() that emit local time. You can find the Date object reference on MDN here.

When run in the US Pacific time zone:

console.log(d.toString());
//=> "Fri Mar 15 2019 15:32:04 GMT-0700 (Pacific Daylight Time)"

Alternatively, you can use a library such as Date-fns, Luxon, or Moment to format your date to a string in a specific way.

The toISOString() method returns a string in simplified extended ISO format (ISO 8601), which is always 24 or 27 characters long (YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively). The timezone is always zero UTC offset, as denoted by the suffix Z.

Try it

Syntax

Return value

A string representing the given date in the ISO 8601 format according to universal time. It's the same format as the one required to be recognized by Date.parse().

Examples

Using toISOString()

const today = new Date('05 October 2011 14:48 UTC');

console.log(today.toISOString()); // Returns 2011-10-05T14:48:00.000Z

The above example uses parsing of a non–standard string value that may not be correctly parsed in non–Mozilla browsers.

Specifications

Specification
ECMAScript Language Specification
# sec-date.prototype.toisostring

Browser compatibility

BCD tables only load in the browser

See also

Convert UTC to local time using JavaScript #

Use the Date() constructor to convert UTC to local time, e.g. new Date(utcDateStr). Passing a date and time string in ISO 8601 format to the Date() constructor converts the UTC date and time to local time.

Copied!

// 👇️ Example date and time in UTC const utcDate = '2022-01-15T11:02:17Z'; const date = new Date(utcDate); // 👇️ "Sat Jan 15 2022 13:02:17 GMT+0200 (Eastern European Standard Time)" console.log(date); // ✅ Convert to Local time console.log(date.toLocaleString()); // 👉️ "1/15/2022, 1:02:17 PM"

Passing a date and time string in ISO 8601 format to the Date() constructor converts the UTC date and time to local time.

The time in the UTC string from the example shows 11:02:17 UTC. Since my time zone is UTC +0200, the result shows 13:02:17.

Note that the UTC date time string should end with a Z to be considered valid ISO 8601.

If the string doesn't have a Z at the end, add it using the addition operator, e.g. isoStr + 'Z'.

You can also get an ISO 8601 date time string by calling the toISOString() method on a Date object.

Copied!

// 👇️ "2022-01-15T12:55:21.313Z" console.log(new Date().toISOString());

We used the Date.toLocaleString method to convert UTC to locale time in the example.

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.

Copied!

const utcDate = '2022-01-15T11:02:17Z'; const date = new Date(utcDate); // ✅ Convert to Local time console.log(date.toLocaleString()); // 👉️ "1/15/2022, 1:02:17 PM"

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

The output you see will likely be different and depends on your default locale and default time zone.

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 sample below return the date or time component according to the visitor's time zone and will yield different results when accessed in different time zones.

Copied!

// 👇️ Example date and time in UTC const utcDate = '2022-01-15T11:02:17Z'; const date = new Date(utcDate); // 👇️ returns Hour of the date console.log(date.getHours()); // 👉️ 13 // 👇️ returns Minutes of the date console.log(date.getMinutes()); // 👉️ 2 // 👇️ returns Seconds of the date console.log(date.getSeconds()); // 👉️ 17 // 👇️ 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 in many different ways.

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

Copied!

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(':') ); } // 👇️ 2022-01-15 13:02:17 (yyyy-mm-dd hh:mm:ss) const utcDate = '2022-01-15T11:02:17Z'; console.log(formatDate(new Date(utcDate)));

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 dates 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 you should 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.

For example, 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.

How do I convert ISO date to local time?

Use the getTime() method to convert an ISO date to a timestamp, e.g. new Date(isoStr). getTime() . The getTime method returns the number of milliseconds since the Unix Epoch and always uses UTC for time representation.

Is ISO 8601 always UTC?

The toISOString() method returns a string in simplified extended ISO format (ISO 8601), which is always 24 or 27 characters long ( YYYY-MM-DDTHH:mm:ss. sssZ or ±YYYYYY-MM-DDTHH:mm:ss. sssZ , respectively). The timezone is always zero UTC offset, as denoted by the suffix Z .

How do I convert to local time?

Add the local time offset to the UTC time. For example, if your local time offset is -5:00, and if the UTC time is shown as 11:00, add -5 to 11. The time setting when adjusted for offset is 06:00 (6:00 A.M.). Note The date also follows UTC format.

How do you convert UTC time to local time in React JS?

Use the Date() constructor to convert UTC to local time, e.g. new Date(utcDateStr) . Passing a date and time string in ISO 8601 format to the Date() constructor converts the UTC date and time to local time. Copied!