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.