Date Time Picker in HTML5

In ASP.NET Web Forms, the Calendar server control lets you pick dates. However, the biggest downside of Calendar is that it requires a post back when a date is selected. No wonder ASP.NET developers often used JavaScript-based pop-up date-time pickers in their web applications. It would be better if the browser itself could display a datetime picker, and that’s where the date and time input types come into the picture. Using these input types, you can select a date, a time, or both. The user can also select a complete week or month rather than a specific day or time.

■ Note As of this writing, Opera is the only browser that displays a pop-up date-time picker for the date and time input types. Chrome displays a pop-up date picker only when the input type is date; it renders a plain text box for other date and time types. Also, there is a difference in the display format for date. Opera, for example, displays dates in yyyy-MM-dd format, whereas Chrome displays them as per machine date format.

<input id="dt1" type="date" />
<input id="dt2" type="time" />
<input id="dt3" type="datetime" />
<input id="dt4" type="datetime-local" />
<input id="dt5" type="week" />
<input id="dt6" type="month" />

The six date-time input types allow you to accept date, time, date and time, local date and time, week, and month, respectively. The dates are displayed in yyyy-MM-dd format, whereas times are displayed in hh:mm:ss format. For weeks and months, the format is yyyy-Www and yyyy-MM, respectively. Below image shows how Opera displays these date-time input types.