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

// get Singapore time

// get London time

</script>
<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!

### Subscribe to the Developer Insider Newsletter

From the hottest programming languages to commentary on the Linux OS, get the developer and open source news and tips you need to know. Delivered Tuesdays and Thursdays

### Subscribe to the Developer Insider Newsletter

From the hottest programming languages to commentary on the Linux OS, get the developer and open source news and tips you need to know. Delivered Tuesdays and Thursdays