Display date/time in user's locale format and time offset

Question

I want the server to always serve dates in UTC in the HTML, and have JavaScript on the client site convert it to the user's local timezone.

Bonus if I can output in the user's locale date format.

Answer 1

Seems the most foolproof way to start with a UTC date is to create a new Date object and use the setUTC… methods to set it to the date/time you want.

Then the various toLocale…String methods will provide localized output.

Example:

// This would come from the server.  // Also, this whole block could probably be made into an mktime function.  // All very bare here for quick grasping.  d = new Date();  d.setUTCFullYear(2004);  d.setUTCMonth(1);  d.setUTCDate(29);  d.setUTCHours(2);  d.setUTCMinutes(45);  d.setUTCSeconds(26);    console.log(d);                        // -> Sat Feb 28 2004 23:45:26 GMT-0300 (BRT)  console.log(d.toLocaleString());       // -> Sat Feb 28 23:45:26 2004  console.log(d.toLocaleDateString());   // -> 02/28/2004  console.log(d.toLocaleTimeString());   // -> 23:45:26

Some references:

• toLocaleString
• toLocaleDateString
• toLocaleTimeString
• getTimezoneOffset

Answer 2

You can do it with moment.js (deprecated in 2021)

It's best to parse your date string from UTC as follows (create an ISO-8601 compatible string on the server to get consistent results across all browsers):

var m = moment("2013-02-08T09:30:26Z"); 

Now just use m in your application, moment.js defaults to the local timezone for display operations. There are many ways to format the date and time values or extract portions of it.

You can even format a moment object in the users locale like this:

m.format('LLL') // Returns "February 8 2013 8:30 AM" on en-us 

To transform a moment.js object into a different timezone (i.e. neither the local one nor UTC), you'll need the moment.js timezone extension. That page has also some examples, it's pretty simple to use.

Note: Moment JS recommends more modern alternatives, so it is probably not a good choice for new projects.