Articles | The 24 Hour World |  back 

Introduction

Ever wanted to know the time in Hawaii or Tokyo? This article will show you how to display the correct time in these form names and others. The three working examples will show how to display the time in the 24 major time zones around the world, to format the time into a readable format, and allow you to choose and display a time from a time zone 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.

Greenwich Mean Time

The International time zones define the time of day in form names 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 International time zone spans 15° of longitude, resulting in 24 International 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.

JavaScript and Time

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:

Sat Oct 6 23:32:18 CDT 2001

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 time zone 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 time zone 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.

Bugs, Features and other Problems

Microsoft Internet Explorer

JScript 1.0, Microsofts implementation of JavaScript in Microsoft Internet Explorer 3.x, returns the time zone offset in the wrong sign. All other browsers, including Microsoft Internet Explorer 4.x, return the time zone offset as the difference, in minutes between GMT0 and the current locale, i.e. if the current locale is New York, then the time zone 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 time zone 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:

Netscape Navigator

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!

Daylight Saving or Summer Time

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 accurate 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 accommodate summer time.

The 24 Time Zones

Now that we know how to calculate the time in a specified time zone, how about showing all of them at once? The following script uses the principles 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 time zone is passed to the setClock() function which uses it to first calculate the required time and then to set the required form field. Rather than workout every time, whether the sign of the time zone offset should be reversed, 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:

AM/PM

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 time zone and will then display the time in that time zone 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:

 

Summer Time:

Time Around the World

Finally, an example that allows a selection of real cities/time zones.

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

Summer Time:

Articles | The 24 Hour World |  back

 

 
Menu

Home
Articles
FAQ's
Links
Tools
 Blog Links
AJAXCoded Blog
CyberCoded.net
CyberCoder
CybersView

Applications

 

Questions, Comments
or Suggestions

Site Search
FAQ Search

AJAX Coded
CAAD @ CyberCoded.net


 
Copyright

Google
WWW CyberCoded.com
Provide Feedback on CyberCoded.com

Copyright © 1996-2008 CyberCoded.com, All Rights Reserved.
CyberCoded.com liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public privacy statements.
Website Hosted By: USNX

We recommend USNX for quality ASP Web Hosting