Astronomy Blog

Pesky Time Zones

Time zones cause no end of confusion when you have to go from one to another. There are plenty of time converters out there on the Internet but, if you are in the middle of reading something, you don't want to go off elsewhere. So I made a little bit of JavaScript so that I could display times in whatever timezone I liked and let everyone see it in their own.

It makes use of the title attribute of HTML tags to display the time in the visitor's local time zone (actually the time zone of their computer but they are likely to be in the same place). I also use a little bit of CSS to add a small clock symbol, to the time, in the same way that Wikipedia does with external links.

The script should be fairly forgiving - it can allow 'am', 'a.m.', 'pm', 'p.m.' between the time and the time zone. It should also cover most one, three or four letter time zone abbreviations. It will return the local time in as similar a format to the one you used as it can e.g. with/without a leading zero, with/without minutes. Here are some examples for you to put your mouse over: 02:34 am ACDT, 9 am CEDT, 18 EDT, 20:09 BST, 5 pm UTC, 07:29 HAT. If you find any mistakes in the code, please let me know.

Quick HOWTO:

Download the JavaScript file and include it at the top of the HTML document body using:

<script language="JavaScript" type="text/javascript" src="timeconverter.js" />

You may want to add the following CSS in your style file (download the image):

dfn.time {
background: url("timeconverter.png") center right no-repeat;
padding-right: 13px;
}

Now you can display the time using something like:

<dfn class="time" onmouseover="UTC(this)">05:43 CDT</dfn>