The Current State of HTML5 Forms

The date Type

<input type=date step=7 min=2014-09-08>
<input type=time min=9:00 max=17:00 step=900>
<input type=week step=2 min=2014-W30>

Live Demo

date

time

week



Firefox
32-
Safari
7-
Safari Mobile
5+
Chrome
20+
Opera
9+
Opera
15+
IE
11-
Android
4.4
No support No support SupportedKinda supported SupportedKinda supported Supported SupportedKinda supported No support SupportedKinda supported

Supported Browser Screenshots

Chrome invalid time
Opera 11

The Low Down

The date and time input types produce controls for entering dates and time in the correct format, including providing native date pickers in some browsers.

  • Date related types include:
    type=date (yyyy-mm-dd)
    Year, month, and day, with no time
    type=datetime - deprecated in favor of datetime-local (yyyy-mm-ddTHH:MMZ)
    Hour, minute, second, and fraction of a second based on UTC time zone
    type=datetime-local (yyyy-mm-ddTHH:MM or yyyy-mm-ddTHH:MM:SS.S)
    Similar to the date and time input types, concatenated with a T. Can be specific up to the millisecond.
    type=month (yyyy-mm)
    Month and year, with no time zone. Months, unlike JavaScript arrays, go from 1 to 12.
    type=week (yyyy-Www)
    Date with the year and a W followed by the week number, with no time zone. A "week" goes from Monday to Sunday, with week 1 being the week containing the first Wednesday of the year, so could start on December 30 or even January 2.
    type=time (HH:MM)
    time value with no time zone in 24-hour military format.
  • When not supported, the browser defaults to the text input type.
  • While the GUI widgets provided by the browser may appear to be in your local syntax for hours and dates (such as 12:15 AM or June 2014) for better user experience, dates will be submitted by all supporting browsers in the syntax listed above.
  • Include min and max attributes, to set lower and upper bounds for acceptable values and for the bounds that the GUI presents to the user.
  • Use the step attribute to set the granularity of the value. For example, <input type=week step=2 min=2014-W30> will allow every other week starting with mid July 2014. The time example above limits values to 15-minute increments (there are 900 seconds in 15m). The date example limits the users to Mondays starting with September 8, 2014.
  • Spec says browsers should not allow people to enter a non-valid string, UI widget or otherwise.
  • Firefox and Safari on OS X do not support these types. You can use the pattern attribute to only allow valid values. When supported, browsers ignore this attribute on these types. And, when supported, the widgets don't allow the users to enter invalid data, so you're golden.
  • Safari iOS 7 broke the week type creating a non-usable UI.
  • Chrome lost support for datetime in version 26, Opera in version 15, and Safari in iOS 7. Instead of using datetime, since support should be deprecated, use date and time as two separate input types.