Monday, January 17, 2011

HTML5 Date Picker

I recently posted that I had decided to use Opera in my HTML5 demonstrations for RMOUG Training Days 2011. As I stated in that post, a big reason for adding the Opera web browser to the set being demonstrated is that it supports some of the HTML5 features better than the other browsers. This post will illustrate one of these cases: the HTML5 Date Pickers.

One of the small but nice things about using Flex or a JavaScript library such as JQuery is the availability of built-in mechanisms for user-friendly input controls. In particular, a good date picker is always appreciated.

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 input element's type attribute. HTML5 dramatically increases the number of available types that can be specified. Several of the new values for the type attribute include those related to date/time: date, datetime, datetime-local, month, week, and 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 input tag. 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.



Conclusion

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.
By at
Labels:

4 comments:

Richard said...

Dustin,

I've been giving this some thought and can't help thinking HTML 5 is moving in the wrong direction here.

I have blogged my alternative here:

http://blog.kennardconsulting.com/2011/11/should-htmlnext-have-higher-level-of.html

I'd be interested in your thoughts.

Regards,

Richard.

November 7, 2011 at 6:38 PM
José Gabriel González said...

Uhm de hecho, Las implementaciones de estas tareas de date-pickers inputs html5 no son soportadas aún por ninguna versión de IE ni Firefox

March 7, 2012 at 4:28 AM
John Fletcher said...

Richard, the post you link to does not make a clear point related to this post and as such your comment appears to simply be an ad for your metawidget product.

July 16, 2012 at 4:47 AM
Mite Mitreski said...

I too actually wrote a blog post about this http://blog.mitemitreski.com/2012/10/input-this-input-that-html5-new-input.html
and also have a small web page to use it as a test of browser support on the input types http://mitemitreski.com/demo/html5/input.html

November 25, 2012 at 5:41 PM

Post a Comment