Screen with bytes of info

RSS Feed
Technology Bytes

Date and Time Stamp in Your Area


Clock

     One of the most recent modification I've made to this blog has been to include the date and time stamp with each article of when it was published.  I, at first, had the date displayed to a format that I liked and in Universal Time.  But then I wondered if there was a way to let people see it in their own time zone.

     With the new HTML5 spec being developed, I would have thought that there would be a way to display the time zone with the TIME element in each person's own time zone/area.  However, when I did some research, I found no such thing in any of the HTML documentation.  The suggested way of doing it was with JavaScript.  So, I decided to combine both the TIME element and JavaScript to do this very thing.

     For each article, I made sure that the TIME element included the DATETIME attribute with Universal Time and left the inner HTML portion of the TIME element empty (which is valid).  Then, when the page loads, I have some JavaScript that retrieves the time value from the DATETIME attribute, creates a new JavaScript Date object from it, and then outputs the local date and time stamp (based on the browser) into the inner HTML portion of the TIME element.

     Example, I start with the TIME element empty with the DATETIME attribute:
<time datetime="2013-03-01T13:21:37+00:00"></time>

     Then I write the following JavaScript function and call it when the page loads:
function articleWriteTimestamps()
{
    var timeTags = document.getElementsByTagName('time');

    for (var i = 0; i < timeTags.length; i++)
       timeTags[i].innerHTML = (new Date(timeTags[i].getAttribute('datetime'))).toString();
}


     Which then outputs the following for my time zone (CST) using my browser (Chrome):
Fri Mar 1 2013 07:21:37 GMT-0600 (Central Standard Time)