HTML5 is currently slated to offer a standard date picker widget that can be used with HTML tags. In this post, I look at the state of the HTML5 date pickers in recent non-beta versions of five popular web browsers (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8, and Opera 11).
HTML supports various input fields via the input tag. The different types of input fields are specified via the
typeattribute. HTML5 dramatically increases the number of available
types that can be specified. Several of the new values for the
typeattribute include those related to date/time:
time. Each of these is illustrated in the following HTML code snippet.
<html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Date Pickers Demonstrated</title> </head> <body> <header> <h1>HTML 5 Date Pickers Demonstrated</h1> </header> <form> <table> <tr> <th>Input Type</th> <th>Input Field</th> </tr> <tr> <td>date</td> <td><input type="date"></td> </tr> <tr> <td>datetime</td> <td><input type="datetime"></td> </tr> <tr> <td>datetime-local</td> <td><input type="datetime-local"></td> </tr> <tr> <td>month</td> <td><input type="month"></td> </tr> <tr> <td>week</td> <td><input type="week"></td> </tr> <tr> <td>time</td> <td><input type="time"></td> </tr> </table> </form> </body> </html>
Of the five web browsers I previously listed, Opera provides by far the most sophisticated implementation of the date/time
types of the
inputtag. Beginning with the positive, the first several screen snapshots show how this simple HTML renders in Opera 11.
Opera 11 Initial Rendering of Page
Opera 11 Input Tag "date" Attribute
Opera 11 Input Tag "datetime" Attribute
Opera 11 Input Tag "datetime-local" Attribute
Opera 11 Input Tag "month" Attribute
Opera's implementation highlights the entire month that will be selected.
Opera 11 Input Tag "week" Attribute
Opera highlights the week that will be selected.
Opera 11 Input Tag "time" Attribute
Opera 11 - All Input Fields Selected
Opera's implementation of the date/time input fields is impressive. I wish the same could be said for the other non-beta browsers. Sadly, the other browsers don't provide support for these field types anywhere close to this elegant. In fact, I don't think it's even worth including all their screen snapshots here. Instead, I simply show a screen snapshot of each after filling out all the fields. In most cases, the browsers simply treated these fields as simple "text" type fields.
Firefox 3.6 Date Pickers: They're Just Text
Internet Explorer 8 Date Pickers: They're Just Text
Safari 5 Date Pickers: They're Just Text with Focus Highlighting
Chrome 8 Date Pickers: Not Quite There
Although not as elegant as Opera's treatment of date/time fields, the Chrome browser treats these fields as more than text and limits what can be entered into the fields. Unfortunately, there are no nice date/time selection popups like Opera provides. Still, it the focused field highlighting is nice and the fact that selected data is somewhat date/time like in format helps.
I look forward to the day when the major browsers consistently support standardized date/time controls so that simple HTML "input" tags with the appropriate attributes will render elegant and stylistic date/time selectors on any browser. Opera 11 currently leads the pack and provides the best illustration of what could be.