The Current State of HTML5 Forms

The date Type

<input type=date>

Live Demo

Safari Mobile
No support Kinda supported No support Kinda supported Kinda supported Supported No support No support

Supported Browser Screenshots

Opera 10.6
Opera 11
Safari 5
Chrome 10

The Low Down

When this input comes into focus, or the arrow widget is clicked, a dropdown date picker is shown. Other date-releated types, for example week have similar dropdowns which work to their specific purpose (in this case, week-row highlighting)

  • Fallback is a regular text input.
  • BUG: Safari 5, at large text size (as above), only the "up" widget works, not "down".
  • Other date related types:
    date yyyy-mm-dd
    datetime yyyy-mm-dd HH:MM
    datetime-local yyyy-mm-dd HH:MM
    month yyyy-mm
    week yyyy-mmW
    time HH:MM
  • Without declaring a default value in Safari 5 or Chrome 6, the down arrow does nothing and the up arrow begins at 1582-10-15 and goes up by day (useless). Chrome 10 starts at current date.
  • In Chrome 20, the date type is working but none of the others.
  • In Safari 5.1/5.2 (Mac) the up/down arrows were removed and do nothing. In Safari 5.1.2 (PC) the up/down arrows work as expected (incrementing day by one).
  • Chrome 6-10 will validate against the YYYY-MM-DD format (as you can alter like a text input). Chrome 17 has removed the up/down arrows (maybe earlier, but they were there in 10) and no longer validates.
  • The layout of Opera's datepicker cannot be changed, but it will respect the current font properties (size, weight, style, color) inside of it. Screenshot. Black will be used for most of the text, but the current color will be used for Sundays.
  • Validation is irrelevant in Opera since the datepicker will insert only valid dates (dropdown menu style). Will ignore value attributes set that aren't in valid format
  • Opera 9 will only take value in HH:MM (good). Opera 11 wont even let you type a letter (better).
  • Spec says browsers should not allow people to enter a non-valid string, UI widget or otherwise.
  • The min and max attributes work (tested Opera 11).
    <input type=date max="2011-04-20" min="2011-04-10">