Yet Another World Clock

I finally completed my so called “World Clock”. The idea was to be able to create a widget to display a clock for different timezones. I used the combination of JavaScript and PHP to achieve the accurate date/time conversion especially when DST needs to be considered.

The design

The goal of this tool is to be able to create a widget as many as the user wanted and this widget contains a clock. A digital clock of course that displays time for various timezones. It aims to be easy to use and easy to add and remove widgets.

The tool is mostly written in JavaScript but the timezone offsets are calculated via PHP 5.3. The trick is to provide a JSON object containing the timezones and timezone offsets generated from PHP and feed it to JavaScript. JavaScript will then generate a UTC date to simulate various timezones.

The wonderful thing is that it allows saving the widgets to that when the user visits the page again, those saved widgets are displayed. It allows the user to display only the necessary timezone.

JavaScript don’t support timezones?

I have read a lot of information that JavaScript is not timezone aware. It cannot even correctly get the offset between the local time and UTC time. However, PHP can and JavaScript supports UTC, meaning the UTC 0 offset.

With this, I decided to exploit UTC to make it appear as if JavaScript knows about timezones. For example, I can generate any UTC dates as many as I can. Then new Date().getTime() is also in UTC format. Given that I know the offset between UTC and the target timezone, it is possible to display date/time on that target timezone using the offset.

For example, if the target timezones are having +5hours and -3hours offset, all I have to do is generate a UTC date in milliseconds, then add the offset, then there we are.

Show me some codes

Here is some pseudo codes.

// This one is in milliseconds, in UTC format
var rawms = new Date().getTime();

// Target timezones are having 5 hours and -3 hours respectively
// Always convert stuff to milliseconds since this is JavaScript
var target1 = new Date(rawms + (5 * 3600 * 1000));
var target2 = new Date(rawms + (-3 * 3600 * 1000));

// Display target timezones hours
alert(target1.getUTCHours());
alert(target2.getUTCHours());

Actual page and credits

See it in action here:

http://www.lysender.com/extra/tools/worldclock.

Although there are many sites that I took inspirations for creating this cute tool, one most notable is “The World Clock – Time Zones” page.

Enjoy and share.