Convert the local time to another time zone with this JavaScript

by Contributor Melonfire | Jan 03, 2006 7:32:00 PM

Tags: JavaScript, Contributor Melonfire, UTC, local time

Takeaway: To display the time of day of a different time zone from the local time zone on a Web page it is necessary to perform various temporal calculations and convert local time to destination time.

As you no doubt know, JavaScript makes it easy to display the local time on a Web page, by directly reading the client's clock. But what if you'd like to display the time in a different location - for example, if your base is in a different country and you want to see "home" time instead of local time?

To accomplish this, it is necessary to perform various temporal calculations and convert local time to destination time. This document explains how to go about performing these calculations.

Step 1

The first order of business is to obtain the current local time. In JavaScript, this is easily accomplished by initializing a Date() object without any arguments:

// create Date object for current location
d = new Date();

Express this local time as the number of milliseconds since Jan. 1, 1970, by invoking the Date()object's getTime() method:

// convert to msec since Jan 1 1970
localTime = d.getTime();

Step 2

Next, find the local time zone offset with the Date() object's getTimezoneOffset() method. By default, this method returns the time zone offset in minutes, so convert this value to milliseconds for easier manipulation:

// obtain local UTC offset and convert to msec
localOffset = d.getTimezoneOffset() * 60000;

Note that a negative return value from getTimezoneOffset() indicates that the current location is ahead of UTC, while a positive value indicates that the location is behind UTC.

Note: In case you're wondering how I arrived at 60000 as the multiplication factor, remember that 1000 milliseconds = 1 second, and 1 minute = 60 seconds. Therefore, converting minutes to milliseconds involves multiplying by 60 * 1000 = 60000.

Step 3

Obtain the current UTC time, by adding the local time zone offset to the local time.

// obtain UTC time in msec
utc = localTime + localOffset;

At this point, the variable utc contains the current UTC time. However, this time value is expressed as the number of milliseconds since Jan 1 1970. Keep it like this for the moment, because there are still a few more calculations to perform.

Step 4

Once you have obtained UTC time, obtain the destination city's UTC offset in hours, convert it to milliseconds and add it to UTC time.

// obtain and add destination's UTC time offset
// for example, Bombay
// which is UTC + 5.5 hours
offset = 5.5;��
bombay = utc + (3600000*offset);

Note: In case you're wondering how I arrived at 3600000 as the multiplication factor, remember that 1000 millseconds = 1 second, and 1 hour = 3600� seconds. Therefore, converting hours to milliseconds involves multiplying by 3600 * 1000 = 3600000.

At this point, the variable bombay contains the local time in the city of Bombay, India. This local time is expressed as the number of milliseconds since Jan 1 1970. Obviously, this isn't very readable, so we need to make a few more calculations.

Step 5

Change the time value calculated in the previous step to a human-readable date/time string by initializing a new Date() object with it, and calling the object's toLocaleString() method.

// convert msec value to date string
nd = new Date(bombay);
document.writeln("Bombay time is " + nd.toLocaleString() + "<br>");

And you're done!

All together

Once you've understand the steps above, take a look at this next script (Listing A), which ties it all together by creating a compact, user-defined calcTime() function to perform all these calculations and return a time value:

Listing A

<html>
<head>
<script language="JavaScript">

// function to calculate local time
// in a different city
// given the city's UTC offset
function calcTime(city, offset) {

�� // create Date object for current location
�� d = new Date();
��
�� // convert to msec
�� // add local time zone offset
�� // get UTC time in msec
�� utc = d.getTime() + (d.getTimezoneOffset() * 60000);
��
�� // create new Date object for different city
�� // using supplied offset
�� nd = new Date(utc + (3600000*offset));
��
�� // return time as a string
�� return "The local time in " + city + " is " + nd.toLocaleString();

}

// get Bombay time
alert(calcTime('Bombay', '+5.5'));

// get Singapore time
alert(calcTime('Singapore', '+8'));

// get London time
alert(calcTime('London', '+1'));

</script>
</head>
<body>

</body>
</html>

Here, the calcTime() function accepts a city name and its UTC offset (in hours). It then internally performs all the calculations described above, and returns a string containing the local time in the named city.

Here's some sample output from the script in Listing A:

The local time in Bombay is Monday, August 01, 2005 4:43:51 PM
The local time in Singapore is Monday, August 01, 2005 7:13:51 PM
The local time in London is Monday, August 01, 2005 12:13:51 PM

Hopefully, this script will save you some time the next time you sit down to code time zone calculations in your Web pages. Enjoy!

6 comment(s)