You are here: irt.org | Articles | JavaScript | Date and Time | The 24 Hour World [ previous next ]
Published on: Saturday 11th April 1998 By: Martin Webb
Ever wanted to know the time in Hawaii or Tokyo? This article will show you how to display the correct time in these formname and others. The three working examples will show how to display the time in the 24 major timezones around the world, to format the time into a readable format, and allow you to choose and display a time from a timezone in menu.
This article may be useful for those people who have contacts around the world, or who need to perform an action by a certain time, but in a different part of the world.
The International time zones define the time of day in formname around the world with respect to the standard time kept in Greenwich, England located on longitude 0°, referred to as the prime meridian.
Standard time is generally referred to as GMT (Greenwich Mean Time), however Astronomers refer to it as universal time (UT).
Each Internation time zone spans 15° of longitude, resulting in 24 Internation time zones. Within each time zone all clocks are set to the same time.
Each time zone is generally referenced from GMT, e.g. England is within GMT0, whereas New York, United States is within GMT-5, i.e. 5 hours behind (or West) GMT, whereas Tokyo, Japan is within GMT+9, i.e. 9 hours ahead (or East) of GMT.
There are however variants to this to allow for boundaries and frontiers as well as economic and social reasons.
Within JavaScript it is possible to obtain the current time using the inbuilt Date object:
<SCRIPT LANGUAGE="JavaScript"><!-- var time_and_date = new Date(); document.write(time_and_date); //--></SCRIPT>
Which when run produces:
There are many Date methods which can be used to extract information from the Date object:
getDate - Returns the day of the month for the specified date.
getDay - Returns the day of the week for the specified date.
getHours - Returns the hour in the specified date.
getMinutes - Returns the minutes in the specified date.
getMonth - Returns the month in the specified date.
getSeconds - Returns the seconds in the specified date.
getTime - Returns the numeric value corresponding to the time for the specified date.
getTimezoneOffset - Returns the timezone offset in minutes for the current locale.
getYear - Returns the year in the specified date.
parse - Returns the number of milliseconds in a date string since January 1, 1970, 00:00:00, local time.
setDate - Sets the day of the month for a specified date.
setHours - Sets the hours for a specified date.
setMinutes - Sets the minutes for a specified date.
setMonth - Sets the month for a specified date.
setSeconds - Sets the seconds for a specified date.
setTime - Sets the value of a Date object.
setYear - Sets the year for a specified date.
toGMTString - Converts a date to a string, using the Internet GMT conventions.
toLocaleString - Converts a date to a string, using the current locale's conventions.
UTC - Returns the number of milliseconds in a Date object since January 1, 1970, 00:00:00, Universal Coordinated Time (GMT).
The one we are interested in for this article is getTimezoneOffset, which as mentioned above returns the timezone offset in minutes of the current locale from GMT0.
We can then use this timezone offset to calculate the current time for GMT0. And then once we've done that we can calculate the time for any given timezone.
JScript 1.0, Microsofts implementation of JavaScript in Microsoft Internet Explorer 3.x, returns the timezone offset in the wrong sign. All other browsers, including Microsoft Internet Explorer 4.x, return the timezone offset as the differnce, in minutes between GMT0 and the current locale, i.e. if the current locale is New York, then the timezone offset is -5 * 60 or -300.
Microsoft Internet Explorer 3.x returns +300. But as we are aware of this we can make the required allowances.
The psuedo code for calculating the time in a particular timezone is as follows:
Get current time.
Get timezone offset.
If MSIE 3.x adjust sign.
Calculate time in GMT0.
Calculate time in required timezone.
The code required to do this is fairly simple. The following code calculates the time in Tokyo, Japan (GMT+9):
<SCRIPT LANGUAGE="JavaScript"><!--
var time = new Date();
timezoneoffset = time.getTimezoneOffset();
if ((navigator.appVersion.indexOf('MSIE 3') != -1)) timezoneoffset = timezoneoffset * (-1);
time.setTime(time.getTime() + timezoneoffset*60*1000);
time.setTime(time.getTime() + 9*60*60*1000);
document.write(time);
//--></SCRIPT>Which when run produces:
The following code:
<SCRIPT LANGUAGE="JavaScript"><!--
var date = new Date();
document.write('Offset = ' + date.getTimezoneOffset() + ' minutes. Date = ' + date);
//--></SCRIPT>produces when run in the UK in British Summer Time (BST i.e. GMT + 1 hour) on Windows 95:
NN 2:
Offset = -59 minutes. Date = Fri Apr 10 13:36:08 1998
Err, okay we know NN 2 is buggy when it comes to time, but we can suffer a 1 minute discrepancy.
NN 3:
Offset = -60 minutes. Date = Fri Apr 10 13:36:08 GMT Daylight Time 1998
Lovely.
NN 4:
Offset = -120 minutes. Date = Fri Apr 10 13:36:08 GMT Daylight Time 1998
Err, quick - somebody shoot me!
The time calculated in GMT does not cater for daylight saving or summer time. For example, when used during the summer the time returned for GMT0 is one hour behind the actual time in London. There is no acurate way to calculate the start and end of summer time for all countries around the world, as there are differences in the date that clocks spring forward or leap back. To allow for this "feature" the following examples all include a checkbox that can be used to turn on and off the addition of an extra hour to accomodate summer time.
Now that we know how to calculate the time in a specified timezone, how about showing all of them at once? The following script uses the priciples from the previous example. It use JavaScript to output the form fields, thus reducing the size of the HTML, and uses the setTimeout() method to reset the times in each of the form fields every 500 milliseconds. The required timezone is passed to the setClock() function which uses it to first calulate the required time and then to set the required form field. Rather than workout every time, whether the sign of the timezone offset should be reveresed, the check for Microsoft Internet Explorer 3.x is performed once, and then a fiddle variable set depending on the results.
<SCRIPT LANGUAGE="JavaScript"><!--
var output = '<CENTER><FORM NAME="clocks"><TABLE>';
for (var gmtX=-12;gmtX<13;gmtX++) {
output += '<TR><TD ALIGN="RIGHT">' + gmtX + ':00 GMT<\/TD>';
output += '<TD><INPUT TYPE="TEXT" SIZE="8" VALUE="hh:mm:ss" NAME="GMT' + (12 + gmtX) + '"><\/TD><\/TR>';
}
output += '<\/TABLE>Summer Time: <INPUT TYPE="CHECKBOX" NAME="summer"><\/FORM><\/CENTER>';
document.write(output);
function padout(number) { return (number < 10) ? '0' + number : number; }
if ((navigator.appVersion.indexOf('MSIE 3') == -1))
var fiddle = 1;
else
var fiddle = -1;
function setClock(gmtX) {
var time = new Date();
time.setTime(time.getTime() + time.getTimezoneOffset()*60*1000*fiddle + gmtX*60*60*1000 +
((document.clocks.summer.checked) ? 60*60*1000 : 0) );
document.clocks.elements['GMT' + (12 + gmtX)].value = padout(time.getHours()) + ':' +
padout(time.getMinutes()) + ':' +
padout(time.getSeconds());
}
function updateClocks() {
for (var gmtX=-12;gmtX<13;gmtX++)
setClock(gmtX);
setTimeout("updateClocks()",500);
}
updateClocks();
//--></SCRIPT>Which when run produces:
The 24 hour clock notation can be confusing to people not familiar with it. Most people are use to using the AM/PM clock notation. The following script allows you to choose the required timezone and will then display the time in that timezone in the AM/PM format.
This example is not that much different than the previous. It creates the form in HTML rather than JavaScript. It uses the value of the selected option as input to the time calculation. It uses the ampm() function to format the time in a more readable format.
<CENTER>
<FORM NAME="formname">
<SELECT NAME="theirzone">
<OPTION VALUE="-12">GMT-12
<OPTION VALUE="-11">GMT-11
<OPTION VALUE="-10">GMT-10
<OPTION VALUE="-9">GMT-9
<OPTION VALUE="-8">GMT-8
<OPTION VALUE="-7">GMT-7
<OPTION VALUE="-6">GMT-6
<OPTION VALUE="-5">GMT-5
<OPTION VALUE="-4">GMT-4
<OPTION VALUE="-3">GMT-3
<OPTION VALUE="-2">GMT-2
<OPTION VALUE="-1">GMT-1
<OPTION VALUE="0">GMT0
<OPTION VALUE="1">GMT+1
<OPTION VALUE="2">GMT+2
<OPTION VALUE="3">GMT+3
<OPTION VALUE="4">GMT+4
<OPTION VALUE="5">GMT+5
<OPTION VALUE="6">GMT+6
<OPTION VALUE="7">GMT+7
<OPTION VALUE="8">GMT+8
<OPTION VALUE="9">GMT+9
<OPTION VALUE="10">GMT+10
<OPTION VALUE="11">GMT+11
<OPTION VALUE="12">GMT+12
</SELECT>
<INPUT TYPE="TEXT" SIZE="8" NAME="theirtime"> Summer Time: <INPUT TYPE="CHECKBOX" NAME="summer">
</FORM>
</CENTER>
<SCRIPT LANGUAGE="JavaScript"><!--
function padout(number) { return (number < 10) ? '0' + number : number; }
function ampm(time) {
var hours = time.getHours(), minutes = padout(time.getMinutes());
var adjhours = (hours == 0) ? 12 : ((hours < 13) ? hours : hours-12);
return ((adjhours < 10) ? ' ' : '') + adjhours + ':' + minutes + ((hours < 12) ? ' am' : ' pm');
}
if ((navigator.appVersion.indexOf('MSIE 3') == -1))
var fiddle = 1;
else
var fiddle = -1;
function updateForm() {
var time = new Date();
var TimezoneOffset = time.getTimezoneOffset();
var gmtX = document.formname.theirzone.options[document.formname.theirzone.selectedIndex].value - 0;
time.setTime(time.getTime() + TimezoneOffset*fiddle*60*1000 + gmtX*60*60*1000 +
((document.formname.summer.checked) ? 60*60*1000 : 0) );
document.formname.theirtime.value = ampm(time);
setTimeout("updateForm()",500);
}
updateForm();
//--></SCRIPT>Which when run produces:
Finally, an example that allows a selection of real cities/timezones.
<CENTER>
<FORM NAME="formname">
<SELECT NAME="theirzone">
<OPTION VALUE="4">Abu Dhabi
<OPTION VALUE="9.5">Adelaide
<OPTION VALUE="-9">Alaska
<OPTION VALUE="6">Almaty
<OPTION VALUE="1">Amsterdam
<OPTION VALUE="-7">Arizona
<OPTION VALUE="2">Athens
<OPTION VALUE="12">Aukland
<OPTION VALUE="-1">Azores
<OPTION VALUE="3">Baghdad
<OPTION VALUE="7">Bangkok
<OPTION VALUE="8">Beijing
<OPTION VALUE="1">Berlin
<OPTION VALUE="1">Bern
<OPTION VALUE="-5">Bogota
<OPTION VALUE="5.5">Bombay
<OPTION VALUE="-3">Brasilia
<OPTION VALUE="10">Brisbane
<OPTION VALUE="1">Brussels
<OPTION VALUE="-3">Buenos Aires
<OPTION VALUE="2">Cairo
<OPTION VALUE="5.5">Calcutta
<OPTION VALUE="-4">Canada - Atlantic Time
<OPTION VALUE="-1">Cape Verde Is.
<OPTION VALUE="-4">Caracas
<OPTION VALUE="0">Casablanca
<OPTION VALUE="8">Chongqing
<OPTION VALUE="5.5">Colombo
<OPTION VALUE="9.5">Darwin
<OPTION VALUE="6">Dhaka
<OPTION VALUE="0">Dublin
<OPTION VALUE="2">Eastern Europe
<OPTION VALUE="0">Edingburgh
<OPTION VALUE="5">Ekaterinburg
<OPTION VALUE="-12">Eniwetok
<OPTION VALUE="12">Fiji
<OPTION VALUE="-3">Georgetown
<OPTION VALUE="10">Guam
<OPTION VALUE="7">Hanoi
<OPTION VALUE="2">Harare
<OPTION VALUE="-10">Hawaii
<OPTION VALUE="2">Helsinki
<OPTION VALUE="10">Hobart
<OPTION VALUE="8">Hong Kong
<OPTION VALUE="-5">Indiana (East)
<OPTION VALUE="5">Islamabad
<OPTION VALUE="2">Israel
<OPTION VALUE="2">Istanbul
<OPTION VALUE="7">Jakarta
<OPTION VALUE="4.5">Kabul
<OPTION VALUE="12">Kamchatka
<OPTION VALUE="5">Karachi
<OPTION VALUE="4">Kazan
<OPTION VALUE="3">Kuwait
<OPTION VALUE="-12">Kwajalein
<OPTION VALUE="-4">La Paz
<OPTION VALUE="-5">Lima
<OPTION VALUE="1">Lisbon
<OPTION VALUE="0">London
<OPTION VALUE="5.5">Madras
<OPTION VALUE="1">Madrid
<OPTION VALUE="11">Magadan
<OPTION VALUE="12">Marshall Is.
<OPTION VALUE="10">Melbourne
<OPTION VALUE="-6">Mexico City
<OPTION VALUE="-2">Mid-Atlantic
<OPTION VALUE="-11">Midway Island
<OPTION VALUE="0">Monrovia
<OPTION VALUE="3">Moscow
<OPTION VALUE="4">Muscat
<OPTION VALUE="3">Nairobi
<OPTION VALUE="11">New Caledonia
<OPTION VALUE="5.5">New Delhi
<OPTION VALUE="-3.5">Newfoundland
<OPTION VALUE="9">Osaka
<OPTION VALUE="1">Paris
<OPTION VALUE="8">Perth
<OPTION VALUE="10">Port Moresby
<OPTION VALUE="1">Prague
<OPTION VALUE="2">Pretoria
<OPTION VALUE="3">Riyadh
<OPTION VALUE="1">Rome
<OPTION VALUE="-11">Samoa
<OPTION VALUE="9">Sapporo
<OPTION VALUE="-6">Saskatchewan
<OPTION VALUE="9">Seoul
<OPTION VALUE="8">Singapore
<OPTION VALUE="11">Solomon Is.
<OPTION VALUE="3">St. Petersburg
<OPTION VALUE="1">Stockholm
<OPTION VALUE="10">Sydney
<OPTION VALUE="8">Taipei
<OPTION VALUE="5">Tashkent
<OPTION VALUE="4">Tbilisi
<OPTION VALUE="-6">Tegucigalpa
<OPTION VALUE="3">Tehran
<OPTION VALUE="-8">Tijuana
<OPTION VALUE="9">Tokyo
<OPTION VALUE="-6">US & Canada - Central Time
<OPTION VALUE="-5">US & Canada - Eastern Time
<OPTION VALUE="-7">US & Canada - Mountain Time
<OPTION VALUE="-8">US & Canada - Pacific Time
<OPTION VALUE="8">Urumqi
<OPTION VALUE="1">Vienna
<OPTION VALUE="10">Vladivostok
<OPTION VALUE="4">Volgograd
<OPTION VALUE="1">Warsaw
<OPTION VALUE="12">Wellington
<OPTION VALUE="9">Yakutsk
</SELECT>
<INPUT TYPE="TEXT" SIZE="8" NAME="theirtime"> Summer Time: <INPUT TYPE="CHECKBOX" NAME="summer">
</FORM>
</CENTER>
<SCRIPT LANGUAGE="JavaScript"><!--
function padout(number) { return (number < 10) ? '0' + number : number; }
function ampm(time) {
var hours = time.getHours(), minutes = padout(time.getMinutes());
var adjhours = (hours == 0) ? 12 : ((hours < 13) ? hours : hours-12);
return ((adjhours < 10) ? ' ' : '') + adjhours + ':' + minutes + ((hours < 12) ? ' am' : ' pm');
}
if ((navigator.appVersion.indexOf('MSIE 3') == -1))
var fiddle = 1;
else
var fiddle = -1;
function updateForm() {
var time = new Date();
var TimezoneOffset = time.getTimezoneOffset();
var gmtX = document.formname.theirzone.options[document.formname.theirzone.selectedIndex].value - 0;
time.setTime(time.getTime() + TimezoneOffset*fiddle*60*1000 + gmtX*60*60*1000 +
((document.formname.summer.checked) ? 60*60*1000 : 0) );
document.formname.theirtime.value = ampm(time);
setTimeout("updateForm()",500);
}
updateForm();
//--></SCRIPT>Which when run produces:
And now...The Weekly Update Script
Extending "Born of the 4th of July"
Monday's child is full of grace