Yes, I know, displaying the time with JavaScript. Something that’s been written about since the dawn of time. Following is a trivial bit of code, but one that I thought others might find useful. We are working with a client whose application broadcasts meetings (and screen captures from those meetings) to client computers. A very cool project that I’d like to write about some day. With regard to time, there are 2 requirements:

  1. Time must be in Eastern Standard Time (or Eastern Daylight Time)
  2. They shouldn’t have to configure any settings to adjust for daylight savings time


If you’ve ever dealt with timezones in JavaScript it becomes apparent pretty quickly that, unless you maintain some sort of configuration file to record the start and end time for DST, it’s going to be impossible to display the correct time. This is due to the fact that UTC time doesn’t account for DST, and you can never be certain of what shape the system clock is going to be in on the client computer.

So, quite simply, we pull in the time from the server hosting the application (via jQuery’s getJSON), pass the timestamp (represented in milliseconds) into the JavaScript Date constructor, and set up a setInterval, set to 1000 milliseconds.

The DOM elements that are populated with the time

<body>
<div id="time">
<span class="time"></span>
(<span class="zone"></span>)
</div>
</body>

The PHP which sets up the json string. This could easily be adopted for other languages.

<?php
   //jquery supports the text/javascript and application/json headers
   header('Content-Type: text/javascript');

   //Eastern Standard Time
   date_default_timezone_set('America/New_York');

   //Allowing for multiple items here provides the ability
   //to include times in other time zones
   //multiplying by 1000 as javascript Date constructor accepts the numerical represenation
   //of the data in milliseconds
   $time = array(
      0 => array('timestamp' => time() * 1000, 'zone' => date('T'))
   );

   echo sprintf('%s', json_encode($time));
?>

Finally, the JavaScript.

var TIME = function(){

    var milliseconds = null;

    return {

        init: function(){
            //lazy load milliseconds
            if (!milliseconds) {

                $.getJSON("time.php", function(r){

                    //ensure that we are getting the proper data
                    if(r[0].zone && r[0].timestamp) {
                       $("#time .zone").html(r[0].zone);
                       milliseconds = r[0].timestamp;
                       TIME.update(new Date(milliseconds));
                       window.setInterval("TIME.init()", 1000);
                    }
                    else {
                       return;
                    }

                });
            }
            else {
                TIME.update(new Date(milliseconds));
            }
        },

        update: function(time){
            $("#time .time").html(time.toLocaleTimeString());
            milliseconds += 1000;
        }
    };
}
();

As I’ve mentioned, this really is a trivial bit of code, however it does have its use … especially if it is mandated by the client. Pulling a timestamp in from the server is nothing new, however you may not have given thought to pulling in the timestamp once (through the lazy loading of the milliseconds variable, which we take advantage of to ensure that we only invoke the getJSON call once) rather than with each iteration of setInterval (as can be seen above). Try not to drool over my JavaScript time display programming prowess. Enjoy.