New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Local Time script

Author: Dynamic Drive

Note: Updated Dec 6th, 05 to support ASP pages.

Description: Want to display the current local time of a specific place in the world? This DHTML script, with the help of either PHP, ASP, or SSI (server side includes), displays the current server time your site is hosted on, and in turn, the local time of anywhere on Earth. You can use it to show visitors your current local time, or the time in New York, Tokyo etc. Now, in order to use this script, the webpage you're adding it to must be either PHP (ie: .php), ASP, or SSI (ie: .shtml) enabled. More on this below.

As mentioned, this local time script uses the time of the server hosting your site as its reference point. To display the local time of Paris then, simply enter into the script the time differential between Paris and your server time (ie: +120 minutes), and Paris' Time is derived and shown. By using the server time instead of each visitor's computer clock as the reference point, this script is more reliable, since you only have to account for a single time being accurate in order for the script to be, and that is your server's time. Contrast that with a local time script that uses each visitor's PC clock for its calculations- if the visitor's time is incorrect, he/she will also get an incorrect local (ie: Paris) time.

Finally, this script can be called multiple times on the same page to display simultaneously the local times of different places. Cool!

Demo:

Server Time:
Paris:
New York:
Tokyo:


Directions: Developer's View

Step 1: Insert the below script into the HEAD section of your page:

Select All

Step 2: Inside your <BODY>, define a DIV or SPAN tag with a unique ID that will contain the local time, then invoke "showLocalTime()" to populate it:

Current Server Time:<span id="timecontainer"></span>

<script type="text/javascript">
new showLocalTime("timecontainer", "server-ssi", 0, "short")
</script>

Here's an explanation of the 4 parameters of showLocalTime():

  1. ContainerID (string): The ID of the DIV or span that will house the local time.
  2. Servermode (string): Valid values are either "server-php", "server-asp", or "server-ssi", to indicate this page as either of type, PHP, ASP, or SSI.
  3. LocaltimeoffsetMinutes (integer): The offset in minutes of the local time you wish to display, from the server time. For example, if your server time is currently 9:30 AM and you know the desired local time is 11:30AM, the offset is 120, or 2 hours then.
  4. Display Format (string): valid values are either "short" or "long". The latter will cause the local date to be displayed along with the time.

For the "servermode" parameter, it must be set to either "server-php", "server-asp", or "server-ssi", depending on whether your page is php, asp, or ssi enabled, respectively. This script will NOT work on 100% static pages, such as plain .html.

That's it. Read on for additional helpful information.

How to calculate the "LocaltimeoffsetMinutes" value for the desired world location

For the "LocaltimeoffsetMinutes" parameter of showLocalTime(), set it to the offset in minutes between the desired local time and the server time. You can calculate this offset easily, by doing this:

1) Display the server time on your page first, by setting "LocaltimeoffsetMinutes" to 0:

<script type="text/javascript">
new showLocalTime("timecontainer", "server-ssi", 0, "short")
</script>

Lets say the time you see on your page is 3:20:45 PM. This is your server's current time.

2) Look up the current time of the location you wish to display, such as New York. Lets say it turns out to be 5:20:54 PM. You now know that "LocaltimeoffsetMinutes" should be 120, or 2 hours separating the two dates. As another example, lets say the desired local time you wish to display is LA, with the current LA time being 2:20:54 PM. The "LocaltimeoffsetMinutes" in this case should be -60 then, or 1 hour separating the two dates, but in the opposite direction (server time is greater than LA time).

3) With "LocaltimeoffsetMinutes" determined, you can now go ahead and display the desired local time. For example:

Current LA Time:<span id="timecontainer"></span>

<script type="text/javascript">
new showLocalTime("timecontainer", "server-ssi", -60, "short")
</script>

That wasn't too difficult was it?

More Information

Before you run off, just a couple more points that are mention worthy:

1) Displaying multiple dates- The object oriented design of this script means you can invoke it multiple times to display multiple local times on the same page! Here's an example:

Current Server Time:<span id="timecontainer"></span><br />
Current LA Time:<span id="timecontainer2"></span><br />
Current New York Time:<span id="timecontainer3"></span><br />

<script type="text/javascript">
new showLocalTime("timecontainer", "server-asp", 0, "short")
new showLocalTime("timecontainer2", "server-asp", -60, "short")
new showLocalTime("timecontainer3", "server-asp", 120, "short")
</script>

1) Watch out for daylight savings time- Depending on where your server is located and/or the local time you wish to display, you may need to adjust "LocaltimeoffsetMinutes" twice yearly to account for Day Light Savings time. If the script is suddenly displaying an incorrect local time, you know that you probably need to re-perform the two steps required to get "LocaltimeoffsetMinutes" again.