Author: BUILDER.COM
There is no doubt that using JavaScript scripts can easily display the local time on a web page by directly viewing the user's clock. But what if you want to display the time in a different region—for example, if your headquarters is in another country and you want to view the "home" time instead of the local time?
To do this, various time calculations must be performed to convert local time to destination time. This article explains how to perform these calculations.
Step 1:
The first step is to get the local time. In JavaScript, this can certainly be done easily by initializing a Data() object.
// create Date object for current location
d = new Date();
By calling the getTime() method of the Data() object, you can display the number of milliseconds between January 1, 1970 and the current time.
// convert to msec since Jan 1 1970
localTime = d.getTime();
Step 2:
Next, find the local time offset value through the getTimezoneOffset() method of the Data() object. By default, this method displays the time zone offset value result in minutes, so this value is converted to milliseconds in the earlier calculation.
// obtain local UTC offset and convert to msec
localOffset = d.getTimezoneOffset() * 60000;
Note that the negative return value of the getTimezoneOffset() method indicates that the local time is before Universal Standard Time (UTC), while the positive return value indicates the local time After Universal Coordinated Time (UTC).
Note: In case you're wondering how I got the multiplication factor of 60,000, remember that 1,000 milliseconds equals one second, and one minute equals 60 seconds. Therefore, to convert minutes to milliseconds, multiply 60 by 1,000 which equals 60,000.
The third step
is to add the local time and the local time zone offset value to obtain the current international standard time (UTC).
// obtain UTC time in msec
utc = localTime + localOffset;
Here, the variable utc contains the current international standard time (UTC). However, this time is expressed as the number of milliseconds from January 1, 1970 to the present. Let it be expressed this way for now, since there are still some calculations to do.
The fourth step is
to obtain the International Standard Time (UTC), then obtain the hourly offset value of the International Standard Time (UTC) of the target city, convert it into milliseconds, and add the International Standard Time (UTC).
// 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 are wondering how I got 3600000 For multiplication factors, remember that 1000 milliseconds equals one second, and one hour equals 3600 seconds. Therefore, to convert hours to milliseconds, multiply 3600 by 1000 which equals 3600000.
At this time, the variable bombay contains the local time in Mumbai, India. This local time is expressed as the number of milliseconds from January 1, 1970 to the present. Obviously, this doesn't make sense, so we have to do some calculations.
The fifth step
is to initialize a new Data() object and call the toLocalString() method of this object. We convert the time value calculated in the previous step into a date/time string that everyone can understand.
// convert msec value to date string
nd = new Date(bombay);
document.writeln("Bombay time is " + nd.toLocaleString() + "<br>");
The conversion is complete!
Aftersummarizing
and understanding the above steps, let's take another look at this script (Listing A), which creates a compact, custom function calcTime() that performs all calculations and returns a time value.
List 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 function calcTime() accepts a city name and its Universal Coordinated Time (UTC) offset value (in hours). It then internally performs all the calculations described above and returns a string containing the local time for this city.
Here are some samples of the output from Listing A.
Mumbai local time is 4:43:51 pm on Monday, August 1, 2005
Singapore local time is 7:13:51 pm on Monday, August 1, 2005
London local time is August 1, 2005 , Monday 12:13:51 PM
Next time you sit down to write a time zone script for your web page, this script will hopefully save you some time. Enjoy! !