Borislav Hadzhiev
Sat Jan 15 2022·3 min read
Photo by Oziel Gómez
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.
// 👇️ 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 above 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 does not have the Z
at the end you can add it using the addition
operator, e.g. isoStr + 'Z'
.
You can also get a ISO 8601 date time string by calling the toISOString()
method on a Date
object.
// 👇️ "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.
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 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.
// 👇️ 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 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
.
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.
/
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.
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.