How do I display a date/time in the 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

Don't know how to do locale, but javascript is a client side technology.

usersLocalTime = new Date();

will have the client's time and date in it (as reported by their browser, and by extension the computer they are sitting at). It should be trivial to include the server's time in the response and do some simple math to guess-timate offset.

Answer 2

Perhaps this resource will help.

Answer 3

You could use the following, which reports the timezone offset from GMT in minutes:

new Date().getTimezoneOffset();

Answer 4

You can use new Date().GetTimezoneOffset()/60 for the timezone. There is also a toLocaleString() method for displaying a date using the user's locale.

Here's the whole list: Working with Dates

Answer 5

getTimeZoneOffset() and toLocaleString are good for basic date work, but if you need real timezone support, look at Fleegix's Date class. From the description:

The fleegix.date.Date object gives you full-blown timezone support, independent from the timezone set on the end-user's machine running the browser. It uses the Olson zoneinfo files for its timezone data.

Answer 6

Here's what I've used in past projects:

var myDate = new Date();
var tzo = (myDate.getTimezoneOffset()/60)*(-1);
//get server date value here, the parseInvariant is from MS Ajax, you would need to do something similar on your own
myDate = new Date.parseInvariant('<%=DataCurrentDate%>', 'yyyyMMdd hh:mm:ss');
myDate.setHours(myDate.getHours() + tzo);
//here you would have to get a handle to your span / div to set.  again, I'm using MS Ajax's $get
var dateSpn = $get('dataDate');
dateSpn.innerHTML = myDate.localeFormat('F');

Answer 7

The .getTimezoneOffset() method reports the time-zone offset in minutes, counting "westwards" from the GMT/UTC timezone, resulting in an offset value that is negative to what one is commonly accustomed to. (Example, New York time would be reported to be +240 minutes or +4 hours)

To the get a normal time-zone offset in hours, you need to use:

var timeOffsetInHours = -(new Date()).getTimezoneOffset()/60

Important detail:
Note that daylight savings time is factored into the result - so what this method gives you is really the time offset - not the actual geographic time-zone offset.

Answer 8

This question duplicates http://stackoverflow.com/questions/13/determining-web-users-time-zone which happens to be one of the first questions.

Answer 9

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);

alert(d);                        // -> Sat Feb 28 2004 23:45:26 GMT-0300 (BRT)
alert(d.toLocaleString());       // -> Sat Feb 28 23:45:26 2004
alert(d.toLocaleDateString());   // -> 02/28/2004
alert(d.toLocaleTimeString());   // -> 23:45:26

Some references:

• toLocaleString
• toLocaleDateString
• toLocaleTimeString
• getTimezoneOffset

Answer 10

Once you have your date object constructed, here's a snippet for the conversion:

The function takes a UTC formatted Date object and format string. You will need a Date.strftime prototype.

function UTCToLocalTimeString(d, format) {
    if (timeOffsetInHours == null) {
        timeOffsetInHours = (new Date().getTimezoneOffset()/60) * (-1);
    }
    d.setHours(d.getHours() + timeOffsetInHours);

    return d.strftime(format);
}