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.


About the Author

Sandeep Agrawal
working @ Kalpavruksh Technologies as Software Engineer. I am a simple and straightforward person adaptable to any environment and work culture. Like to work in a creative and challenging environment using cutting edge technologies where I could constantly learn and successfully deliver solutions to problems.

Be the first to comment on "UTC time to the local time in JavaScript"

Leave a comment

Your email address will not be published.


*


1 Shares
Tweet
Pin1
Share
Share
Share
%d bloggers like this: