Context
On most services (applications or web sites), there is a strong need regarding input dates.
The best way of achieving this is by displaying a calendar to the user. There are many ways of doing this using JavaScript but since the HTML5 team has created a specific tag to deal with that, we could use it, at least on devices that support it.
HTML5 – what does the W3C tell us
« The input element with a type attribute whose value is « date » represents a control for setting the element’s value to a string representing a date. »
A valid full-date as defined in RFC 3339, with the additional qualification that the year component is four or more digits representing a number greater than 0.
Example: 1996-12-19
In the HTML source, it looks like this : <input type="date" name="mydate">
What do we expect ?
This tag is designed to input a date. We are expecting that a compliant browser would display a calendar without any use of JavaScript or at least it would display an optimized keyboard on touch screen devices.
The test
We hosted on a web server a valid HTML5 page with the two following cases :
- Basic input field :
<input type="date" name="date_0"/> - input field with upper and lower bound :
<input type="date" name="date_1" min="2011-01-01" max="2011-02-01"/>
The results
We have ran tests on some of the latest devices known for having a good web browser with top of the line HTML 5 compatibility.
Except for the Opera browser, all of those devices are running a webkit based browser.
The results are displayed in the table bellow :
| Browser (OS) | Basic input field | input field with upper and lower bound (min= »2011-01-01″ max= »2011-02-01″) |
|---|---|---|
| Chrome 9.0 (linux) | Partial. The input field is specific but do not display a calendar. (screen-shot 1) |
Partial. Bounds are evaluated. A date can not be set if outside of the specified range. |
| Opera 11 (linux) | Ok. A calendar is displayed acording to user’s local setting ans language (Screen-shot 2) |
Ok. A date can not be set if outside of the specified range. |
| iOS 4.2.1 (iPhone4) | Nok. A basic input field is displayed (screen-shot 3) |
Nok. A basic input field is displayed (screen-shot 3) |
| iOS 4.0 (iPod) | Nok. A basic input field is displayed (screen-shot 3) |
Nok. A basic input field is displayed (screen-shot 3) |
| Android 2.3 (emulator) | Nok. A basic input field is displayed (screen-shot 3) |
Nok. A basic input field is displayed. (screen-shot 3) |
| Android 2.2 (Nexus 1) | Nok. A basic input field is displayed (screen-shot 3) |
Nok. A basic input field is displayed (screen-shot 3) |
| Android 1.6 (emulator) | Nok. A basic input field is displayed (screen-shot 3) |
Nok. A basic input field is displayed (screen-shot 3) |
| Palm Pré 2 | Nok. A basic input field is displayed (screen-shot 3) |
Nok. A basic input field is displayed (screen-shot 3) |
Screen shots
Screen shot 1 : Chrome
Screen shot 2 : Opera
Screen-shot 3 : Other browser
Conclusion
None of the phones tested above could display this HTML5 tag as expected but at least, a basic input field was displayed.
My recommendation : using HTML5 specific input functionalities on mobile devices is a bit too early right now.
Yann Scheydeker
