Home » UTC time to the local time in JavaScript

UTC time to the local time in JavaScript

UTC Timezone to Local Timezone

In this article, we will learn about how to display a UTC time to the local timezone in JavaScript.


The problem

Generally, dates are stored in a common timezone format and that is mostly in UTC format in the programming.

When displaying the date-time to the user in an application, some display it in UTC itself while other covert it to another specific format.

Now let’s take a scenario of an e-consult appointment booking through a healthcare application.

  • A user from Chicago, USA, book an appointment for 11 AM.
  • The application maintains it in the UTC timezone.
  • So the date saved in the database will be for 5 PM at UTC timezone because Coordinated Universal Time is 6:00 hours ahead of Chicago.
  • Now displaying the appointment date as 5 PM would not be a good user experience because the appointment is booked for 11 AM Chicago time as per the user.

Due to this, it is always good to display the date-time for any information in the user’s local timezone. At least for the scenarios like we saw above.


The Solution

  • There are many ways to convert the date time to the local timezone.
  • Also, the solution may vary which depends on the type of the application like web-based app or mobile android apps, etc.
  • Here I will be focusing the solution mainly for the web-based application.
  • One easy solution is to append the letter ‘Z’ which is “zero hour offset” for UTC.
    So if the UTC date is “2020-08-26 14:27:28” then we can simply add ‘Z’ at the end of it and then pass to the Date() method to display in local timezone format.
var datetime = "2020-08-26 14:30:28";
var localDateTime = new Date(datetime + 'Z');
// Output: Wed Aug 26 2020 20:00:28 GMT+0530 (India Standard Time)
  • But one problem with the above approach is that it does not work with the Safari browser so in the Safari browser it will return the result as “Invalid Date”.
    • So a better and working solution is that:
      • Extract the numbers from the date-time.
      • Then pass extracted values to method Date.UTC() which will construct a valid UTC date-time format.
      • and at last, pass that to the Date() method to get the UTC time to the local time.
var datetime = "2020-08-26 14:30:28";
// You may have '2020-08-26T14:30:28.593Z' as well based on how your date is saved in the database.


datetime = datetime.split(/[^0-9]/);
// Output: ["2020", "08", "26", "14", "30", "28"]

date = new Date(Date.UTC(
    parseInt(datetime[0]),
    parseInt(datetime[1]) - 1,
    parseInt(datetime[2]),
    parseInt(datetime[3]),
    parseInt(datetime[4]),
    parseInt(datetime[5]))
);

// Output: "Wed Aug 26 2020 20:00:28 GMT+0530 (India Standard Time)"

I hope you like this article and helps you to solve your problems.

Visit Techtalkbook to find more related topics.


Leave a Reply

Your email address will not be published.