HTML5 Forms Date Input Elements
The third section of my over-excited journey into HTML5 forms deals specifically with date-related input elements. You may have already heard that there is a date-picker input type, but there is more on offer than just a boring old date-picker. We have lots of different date inputs and we also have some attributes to help make them behave exactly as we want.
So here is an example of a date input with both min and max dates set. The browser will display a date picker and it will also prevent dates outside of our range from being selected.
<input type="date" name="date" min="2011-01-01" max="2011-05-31">
Dates before the “min” date cannot be selected.
Dates after the “max” date cannot be selected.
Just as you thought it couldn’t get any more exciting, you discover that there is another type of date input. The week input type lets the user select a week-of-the-year, for example “2011 Week 52”. Just like the date input type, the browser will show a date-picker and you can set a min and max date.
<input type="week" name="week">
Another variation on the date input type, the month selector allows a user to select a month, for example “2011-05”. All the same rules apply to this one too.
<input type="month" name="month">
Time and Datetime
Follow the same pattern for type=”time” and type=”datetime”. The browser will show a visual picker and you can specify min and max values… great stuff!
In my next episode on HTML5 forms I’m going to cover number related inputs.