Stuart Homfray The Weblog

Now You Know What Time It Is

In the entry entitled What Time Is It?, I stated that I thought it pretty pointless for a website to simply display the visitor’s time, as everyone using a computer generally KNOWS the current time. I asked whether it it might be better to give the visitor something more useful: the website proprietor/owner’s time - then, if the site is an online store or customer service resource, the visitor can decide whether they wish to make contact straight away or wait a little while.

The method that I put foward seemed pretty logical, but there were a couple of extra things that I didn’t consider:

1. When you obtain the time from the server, why not save a little time(!) and future problems by retrieving the current Greenwich Mean Time using the PHP gmdate() function. It’s then a relatively simple task to add/subtract the number of hours that you are offset from GMT.
2. I completely forgot about Daylight Saving Time (or Summer Time in the EU). This figure needs to be included, but it depends upon whether your country applies it and, for what period of time it chooses to do so.
3. Displaying the result: obviously, this is the least important, but do we REALLY need yet another script that either ’stamps’ the page with a date or places the time/date within a form field?

Here’s what I come up with

The script is a combination of PHP and Javascript, that, apart from a few amendments here and there to add flexibility, is heavily based upon James Cridland’s Accurate Clock script. It displays a clock and date in standard text (so you can style it using CSS) in the format 20:03:30 - Sunday 2 May 2004, with an updating seconds figure. To see it in action along with a copy of the script itself, take a look here.

To use the script, first you need to enter a couple of PHP variables: $gmtoffset and $dst.

$gmtoffset is your (the website owner) offset from GMT - if you’re not sure, have a look for your location on the World Map of Time Zones.

$dst is your Daylight Saving Time zone. At the moment, the function only supports 3 options: no DST (0), European Union DST (1), and United States DST (2). Other ‘zones’ need to be added, but I only had the equations to calculate EU and US (and I found these equations on the WebExhibits Daylight Saving Time page mentioned earlier - so it’s a big thanks to those folks as well!)

If you fancy using the script, visit the What’s My Time page to see it in action and to grab the script itself. If you can improve upon it’s efficiency or usability, if you find any problems, or if you decide to add in extra calculations for other Daylight Saving Time zones, I’d appreciate it if you let me know. I’d also be interested in hearing from anyone that decides to use it (mainly because I’m nosy!)

UPDATE: 11-Oct-2004

In the process of making a few amendments to the site, I noticed that the previous version of this little application was incorrectly calculating the time (it was only looking at the month for the Daylight Saving Time setting rather than the full date).

I have now amended the code by running a date comparison utilising the getTime() method on the Date() object (don’t worry if you don’t understand this. All that getTime() does is to convert a date into a single number - the number of millseconds since midnight on the 1st January 1970)

The Javascript now works correctly (I’ve done some more testing!) and the ‘What’s My Time?‘ page has been updated with the new code.

Share and enjoy!

UPDATE: 17-Oct-2004

Purely by chance, I managed to catch a look at the script running at midnight - unfortunately it was showing a time of 24:43:16 along with the name of the previous day. This was down to the simplistic way that I had chosen to add/subtract hours from the final time: I obtained the hours variable value BEFORE adding/subtracting the necessary number of hours due to GMT offset and Daylight Saving Time.

So now here’s what should be the final, FINAL fix to what I believe is a quite useful way of displaying the time on your website. All of the time calculations are now carried out BEFORE the variables for the final time display are set, using the getTime() and setTime() methods described above - everything’s working correctly now!!