DOM Scripting and the <time> Element

We've created a fun demonstration (well, at least it was fun to Andreas and me last night at 1AM) of how to make use of the <time> element via DOM scripting. Behold our mighty date robot.

When a date is selected from the robot's date picker, a new <time> element is dynamically created and inserted into the "date log". Let's take a closer look at how that's accomplished in the makeTime function expression:

var makeTime = function(date){
  var time = document.createElement('time');
  time.dateTime = date;
  time.textContent = time.valueAsDate;
  log.appendChild(time) && fillMarquee(time);
}

A new <time> element is created with its dateTime property set to the value of the date picker. This corresponds to the datetime attribute if we were to include this via markup. For no real reason other than to see what a Date object looks like, we set the textContent of the element to time.valueAsDate. This new DOM API returns a JavaScript Date object from any valid <time> element.

At this point, standard JavaScript date manipulation is possible, for example showing the day of the week and the difference in days between today and the selected date (<marquee> element optional).

To learn more about the <time> element, be sure to check out Bruce Lawson's HTML5 Doctor article on the subject as well as the HTML5 spec.

NOTE: This demo requires features implemented in Opera 11.50. You can grab it here.