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.
|
