A Date and time field can be easily found in many web forms. Typical applications are like ticket booking, appointment booking, ordering pizza and etc.
As of writing, the only web browser completely support date time input is Opera (v11) and Google Chrome (v20). In HTML5, it is the job of web browser to ensure user can only enter a valid date time string into the input textbox.
|Browsers||Date Time Support|
|IE 9 Beta|
If you happen to have Opera version 11 or Google Chrome 20 (or later version of course) installed in your computer, please feel free to check it out.
If you do not have the web browser that support it, the picture below shows you how it looks like.
<label for="meeting">Meeting Date : </label><input id="meeting" type="date" value="2011-01-13"/>
Once again HTML5 has made our life easier! Furthermore, you are not just getting "Date" input, there are half a dozen of "Date Time" related inputs that you can pick and use! Of course, the ball is now in the court of the web browser companies as they decide when to implement this standard.
1. Date (<input type="date"/>)
Apparently this is browser native date picker. You can only pick a specific date from the calendar.
2. Week (<input type="week"/>)
Instead of picking a date, you can pick a week too. Please notice the Week number on the left of the calendar.
3. Month (<input type="month"/>)
You can even have a month picker, here the calendar that allows you to choose a month in a year.
4. Time (<input type="time"/>)
This is nothing special, a time picker for time input.
5. Date and Time (<input type="datetime"/>)
You can choose date and time with time zone. Input value is represented in UTC time.
6. Local Date and Time (<input type="datetime-local"/>)
In compared to UTC time, you can have input date time value represents local time too.
Let's look into the related attributes that we possibly use.
|value||Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.|
|min||Minimum Date or time|
|max||Maximum Date or time|
|step||Step scale factor.
Different type of input has its own default "step" value.