How to show a UTC time as local time in a webpage?

Question

I have a database that holds a time as UTC. This time can be shown in a webpage, so I’ve been asked to show it as local time in the page as it can be viewed from any country. A colleague mentioned something about getting the country settings from the current thread (on the server) but I couldn’t find any details on this. Is what I want to do possible?

Answer 1

If you (and your website) are comfortable with javascript, there is a very easy way to accomplish this.

First, on the server side, you would have the UTC date/time formatted in RFC 3339 format (the standard for internet time used by, among other protocols, icalendar). The basic syntax of RFC 3339 is:

YYYY-MM-DDTHH:MM:SS

Such that where I am, the time would be:

2010-05-04T05:52:33

But when the time is not local, but UTC, you add a Z to the end to denote this. So in my case, since I'm at -0500 hours from GMT, the same time above would be:

2010-05-04T10:52:33Z

So, first you get the server to output the above to your web page's javascript. The javascript can then parse that timestamp and it will output the date and time adjusted to the browser's time zone (which is determined by the computer hosting the browser). You should remember that if a user is from Tokyo and is viewing your website in Spain, they will see the timestamp in Tokyo time unless they've adjusted their computer's clock.

So the javascript would be:

    var time_string_utc = some_server_variable; // timestamp from server
    var time_string_utc_epoch = Date.parse(time_string_utc);
    var time_utc = new Date();
    time_utc.setTime(time_string_utc_epoch);

At this point, you have a javascript date object set to your UTC timestamp. A quick explanation of what happens above:

The first variable assumes you have passed the timestamp string to that variable from the server.

The second variable uses the Date.parse() method to convert the string to an epoch timestamp.

The third variable creates the unset Date object.

The last line line uses setTime method, which sets a Date object from an epoch timestamp.

Now that you have the object, you can output it to the user as you see fit. As a simple experiment, you can use:

document.write(time_utc);

which, if you are in my timezone using the UTC timestamp I started off with:

2010-05-04T10:52:33Z

would give:

 Tue May 04 2010 05:52:33 GMT-0500 (CST)

but you can use various javascript methods to format the time into something much more pleasant looking.

No need to guess the user's country or even adjust your timestamp, so long as you trust the user's local browser/computer time zone.

Again, the short version:

    var time_string_utc = some_server_variable; // UTC time from server
    var time_string_utc_epoch = Date.parse(some_server_variable);
    var time_utc = new Date();
    time_utc.setTime(time_string_utc_epoch);
    document.write(time_utc);