Displaying Your Local Time

Have you ever thought how useful it might be to display your local time on your web site so that visitors to your site will know what time it is where you are? If you have a site where you expect to interact with the visitors then you may have.

There are three computers involved in getting the information transferred from you to the visitors to your web site. There is your computer that you work on to create the web pages, there is the server where the pages are stored, and there is the visitor's computer that they use to view the pages.

You can place scripts in your page that run on the visitor's computer and you can run programs from the server. Nothing that you place in your web page can access any information from your computer.

Given this, you might think that arranging to display your local time on the page for your visitor to see it might be impossible. Not so as you can see from the time displayed below. In this instance, my computer is located in Australia, the server is in America and your computer is located wherever in the world that you are.

The script that displays the time actually runs on your computer and relies on you having your computer's timezone and local time set correctly in order to calculate what the time is at my location. (Similarly when you use the script on your site it will rely on your visitor having their computer set correctly)

This script has undergone numerous rewrites since I first wrote it and I doubt that much of the original code remains. This latest version is almost completely unobtrusive and is attached to the bottom of the page with just an id in the HTML to identify where the information is to be displayed.

You will need to update a number of fields at the bottom of the script to refer to your location and timezone and if your location uses daylight saving time you will need to update one line of the script twice a year to convert your time to and from daylight saving time. I have not automate this as a part of the script as different places use different rules for determining the start and end dates. If you want to automate it then simply set up a function that tests if you are on daylight saving time or not and use that function call in place of the value at the bottom of the script.


To use this script simply attach a file containing the above script to the bottom of your web page immediately before the </body> tag and update the parameters at the bottom of the script so they reference the id where you want the time to appear and identify how your local time is to be displayed. The current version of the script is now as close to being completely unobtrusive as it is possible to make it with only two ids being exposed - the one you specify and a second that is the same id with 'time' concatenated on the end).

The script works fine as is if you live somewhere that doesn't use daylight saving time but requires manual adjustment twice a year if you have daylight saving.

Instead of having to adjust manually on the dates that daylight saving starts and finishes, you can if you wish replace the 0 or 1 that indicates whether your location is on DST or not with a function call that works it out based on the dates that your area goes on and off of daylight savings time. If the dates change each year you may still need to update the script once a year but the date of the update is no longer as critical.

Here we usually go onto daylight savings time at 2am on the first Sunday in October and back to standard time at 3am on the first Sunday in April. The following code will perform this switch at midnight visitor local time on those dates which is within a day of the correct time for the change. (To be more accurate than this would require about three times as much code which I don't think is worth it in this instance).

var getDST - function() {
var dst, gmt, lsm, lso;
dst = 0; gmt = new Date; lsm = new Date; lso = new Date;
// 1st sunday in April end
lsm.setMonth(3);lsm.setDate(7);var day = lsm.getDay();lsm.setDate(7-day);
// 1st sunday in October start
lso.setMonth(9);lso.setDate(7);day = lso.getDay();lso.setDate(7-day);
if (gmt < lsm || gmt >= lso) dst = 1;
return dst;

You would of course need to change the code to determine the appropriate dates for your local circumstances. Note that the month numbers run 0 = January through 11 = December and not 1 through 12.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow