Your host:
Stephen Chapman

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 relys on your having your timezone and local time set correctly in order to calculate what the time is at my location.

You will need to update a number of fields at the top 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 attempted to automate this as some countries vary their start and end dates from year to year.

dst indicates whether you are on daylight savings time or not, update this to 1 when you are on daylight saving time and back to 0 when daylight saving time ends.
loc is the name of the place where you are located. (In my case 'Sydney, Australia')
mtz is your local time zone relative to Universal Coordinated Time (which was previously called Greenwich mean Time). This is the number of hours ahead of UTC that your local time is so if local time is behind UTC then the value should be negative. (In my case this is set to 10 because Sydney is 10 hours ahead)
stdz is your local identifier for standard time. (in my case 'AEST')
dayz is your local identifier for daylight savings time. (in my case 'ADST')

The remainder of the script obtains the current UTC time and day using the current time and timezone from the visitor's computer and then adjusts it for the timezone that you have specified in order to display the time at your location.

You are welcome to download a copy of this script to use on any non-commercial web site that you may have provided that you leave all comments in the code exactly as written. If you have a commercial website you may still use the script (subject to the same conditions) in return for a donation toward the cost of my maintaining this site.

To insert the script into your page, place the following code in the <head> section of your page.

and the following code (exactly as shown) into the <body> section.

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 place code after the dst=0 line to set the daylight saving flag 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 last Sunday in October and back to standard time at 3am on the last Sunday in March. 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 gmt = new Date;
var lsm = new Date;
var lso = new Date;
lsm.setMonth(2); // March
lsm.setDate(31);
var day = lsm.getDay();// day of week of 31st
lsm.setDate(31-day); // last Sunday
lso.setMonth(9); // October
lso.setDate(31);
day = lso.getDay();
lso.setDate(31-day);
if (gmt < lsm || gmt >= lso) dst = 1;

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.

FaceBook Follow

Twitter Follow

Displaying Your Local Time

Related Articles