JavaScript: Convert UTC time to local time and vice versa

It is essential for web applications to display the correct time, especially when dealing with multiple time zones. This is where converting between UTC and local time comes in. This article will discuss what UTC and local time are, why it is necessary to convert between the two, and how to convert UTC time to local time and vice versa using Javascript.

Understanding UTC and Local Time

UTC (Coordinated Universal Time) is the international standard for time. It is a 24-hour clock that is used for international timekeeping. UTC is based on the time of the prime meridian (0° longitude) and is adjusted to account for leap seconds. UTC is used to ensure that all time is the same, regardless of where in the world it is being measured. It is the successor to Greenwich Mean Time (GMT).

Local time is the time displayed based on the time zone of the person viewing it. It is the time that is displayed in the local area, and it is adjusted to account for daylight savings time. Local time is displayed in relation to UTC and is typically displayed in the 12-hour clock format.

UTC Time to Local Time

Using Date.toLocaleString() method

Example:

// the input is in ISO-8601 format
var utcDate = "2022-03-19T20:15:50.000Z";
var localDate = new Date(utcDate).toLocaleString("en-US", {
  localeMatcher: "best fit",
  timeZoneName: "short"
});

console.log(localDate);

Output:

3/19/2022, 1:15:50 AM GMT-7

Note that the output depends on the user’s location.

Another example:

var utcDate = new Date(Date.UTC(2022, 3, 19, 8, 20, 49));
var localDate = utcDate.toLocaleString("en-US", {
  dateStyle: "full",
  timeStyle: "full"
});

console.log(localDate);

Output:

Tuesday, April 19, 2022 at 1:20:49 AM Pacific Daylight Time

Using getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds()

Example:

var utcDate = new Date(Date.UTC(2022, 03, 19, 17, 39, 49));

// Get local year, month, date, hour, minute, and second
console.log('Year:', utcDate.getFullYear());
console.log('Month:', utcDate.getMonth());
console.log('Date:', utcDate.getDate());
console.log('Hour:', utcDate.getHours());
console.log('Minute:', utcDate.getMinutes());
console.log('Second:', utcDate.getSeconds());

// Create a local date object in case you need to perform some operations
var localDate = new Date(
   utcDate.getFullYear(),
   utcDate.getMonth(),
   utcDate.getDate(),
   utcDate.getHours(),
   utcDate.getMinutes(),
   utcDate.getSeconds()
);

A user with the PDT time zone (Pacific Daylight Time) will get this result:

Year: 2022
Month: 3
Date: 20
Hour: 12
Minute: 39
Second: 49

Local Time to UTC Time

Using toISOString() method

Example:

var localDate = new Date();
console.log(localDate.toISOString());

Here’s my output:

2022-03-19T17:25:52.781Z

Your output depends on your location and when you run the code.

Using getUTCFullYear(), getUTCMonth(), getUTCDate(), getUTCHours(), getUTCMinutes(), getUTCSeconds()

Example:

var localDate = new Date();

var utcDate = new Date(
        Date.UTC(
          localDate.getUTCFullYear(),
          localDate.getUTCMonth(),
          localDate.getUTCDate(),
          localDate.getUTCHours(),
          localDate.getUTCMinutes(),
          localDate.getUTCSeconds()
        )
);

// do something with your utcDate object

Closing Thoughts

You’ve learned a few techniques to turn UTC time into local time and vice versa in Javascript.

The conversion between UTC to local time is necessary when dealing with time-sensitive applications. For example, if an online store is displaying the time when an order is placed, it is important to make sure the time displayed is the same no matter where the customer is located.

In addition to displaying the correct time, the conversion between UTC time and local time is also necessary when dealing with data and analytics. For example, if an online store is collecting data on when customers are making purchases, it is important to make sure the data is being collected correctly. If the data is collected in UTC, but the analytics are being displayed in local time, it is important to convert the data to ensure that the analytics are accurate.

If you have any questions related to this article, please leave a comment. We’re more than happy to hear from you.