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)
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)
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.
- So a better and working solution is that:
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)"
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)"
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.
Related Posts
- https://medium.com/@toastui/handling-time-zone-in-javascript-547e67aa842d
- https://stackoverflow.com/questions/6427204/date-parsing-in-javascript-is-different-between-safari-and-chrome