What's The Time? Using JavaScript to Localize Time Displays

How can we use JavaScript to localize time displays? It's an easy enough question to answer. Recently, however, the approach to getting the answer might be a little different than it was even just a few years ago. There was a time (sorry, but the subject is going to lend itself to the odd pun here and there!) when the common man, such as myself, would have taken a glance at the sundial in the village square for a reasonable estimate. Those who could afford one would have a timepiece of some sort in their home. A little time goes by, and along comes the pocket watch. Now we're making progress! It shrinks down, gets more accurate and can be strapped to our wrist and called a wristwatch. Great! The only trouble is that while these timepieces have been shrinking, so too has our planet - at least figuratively.

Transportation and, most especially, communication improvements have contributed to this effect. Now we can answer the phone and talk to the friend who has called for a while without worrying too much about the distance or cost associated with the call. Gone are the days when long distance calls were so expensive that you almost had to plan out each sentence you'd say before you picked up the phone! But: when the conversation has been going on for a little while and your friend asks "what's the time now?" you have to think for a moment whether they mean where you are, where they are or whether that makes a difference anyway. Throw the Web into the mix and you suddenly have to remember that's its full name begins with "World Wide".

A conscientious web designer, such as yourself, would always remember that they don't know where their audience is. To meaningfully state what the time is, you need to state where. To my way of thinking, "locally" doesn't cut it either. Simply saying "locally" leaves open the question of whether you mean local to the server or local to the client. How many web sites have you seen they proudly say something like "and the current time is ...."? Oh really? And how do they know? Maybe it should say "and the current time at your computer's location is ...." or maybe.....

Since it is browsing the web, there's a pretty good chance that the computer the website visitor is using knows where it is. Every modern operating system holds a setting that tells it where it is, or more specifically which time zone it's in. So what you need is a means to ask it to give you that info. And that's where HTML Goodies comes in. Actually that's where this article comes in! Here's how to query the visitor's computer using JavaScript. Remember that JavaScript is a client side scripting language, meaning that it runs on the client computer. This means it's running right on the machine that knows what time zone it's in. And JavaScript includes a method called "getTimezoneOffset". There are also some convenient methods for formatting the date to display either the local time or GMT (see the example, below.)

All time zones are computed relative to Greenwich Mean Time (GMT), also known as Universal Time Coordinated (UTC). A modern operating system can query a central server system that holds the time regulated by an atomic clock and adjust its own clock to keep it accurate. To do this, the central computer provides GMT and the local OS knows its offset from GMT in minutes. The offset is either a positive or a negative number depending on whether the local zone is behind (to the west of) or ahead of (to the east of) GMT. A computer located in New York City, for example, which is five hours behind GMT, would report an offset of 300. A computer in Paris, however, which is an hour ahead of GMT would report an offset of -60 (negative 60). Stated another way, the offset is the amount, in minutes, to be added to the local time in order to get GMT.

Your astute mind has already wondered about daylight savings time considerations, hasn't it? To answer your unspoken question: operating systems adjust for daylight savings times, if applicable, before reporting the time offset. This means you don't have to worry about it. You'll only get bad information if the local computer is not correctly set up, but there's nothing you can do about that.

So, to use those methods:

In the following example we create a new date object which will hold our date and time information. We then use the getTimezoneOffset method to display the offset from GMT, and the toLocaleString and toGMTString methods to format and display the date and time local to the client machine and GMT, respectively.

<html><head></head><body>
<script language="javascript">
ourDate = new Date();
document.write("The time and date at your computer's location is: "
+ ourDate.toLocaleString()
+ ".<br/>");
document.write("The time zone offset between local time and GMT is "
+ ourDate.getTimezoneOffset()
+ " minutes.<br/>");
document.write("The time and date (GMT) is: "
+ ourDate.toGMTString()
+ ".<br/>");
</script>
</body></html>

The output of this script is the following:
The time and date at your computer's location is: 9/10/2015, 8:51:47 AM.
The time zone offset between local time and GMT is -420 minutes.
The time and date (GMT) is: Thu, 10 Sep 2015 01:51:47 GMT.

In the next part of this series we'll take a closer look at the Date() object.

[Part Two:  The Date() Object]

http://www.htmlgoodies.com/beyond/javascript/article.php/3472371/Whats-The-Time-Using-JavaScript-to-Localize-Time-Displays.htm