HTML5 Datetime - A HTML5 Tutorial And Example Of Datetime

May 05, 2011 — HTML5 introduces a number of new and useful input types to be used in forms. This HTML5 tutorial will focus on the input types date, time, week, month, datetime and datetime-local and demonstrate by example the HTML5 attributes step, min and max.

HTML5 DateTime Input Types

HTML5 introduces several new input types to create date/time pickers. The following example we will demonstrate the the HTML5 input types date, time, week, month, datetime and datetime-local. We will also introduce the use of step, min and max. If you are unable to see the following examples your browser doesn't support HTML5 datetime and all you see are text boxes.



<input type="date" name="d" min="2011-08-01" max="2011-08-15">
This example of the HTML5 input type "date" combine with the attributes min and max shows how we can restrict the dates a user can input. The attributes min and max are not dependent on each other and can be used independently.



<input type="time" name="t" value="12:00">
The HTML5 input type "time" allows users to choose a corresponding time that is displayed in a 24hour format. If we did not include the default value of "12:00" the time would set itself to the time of the users local machine. 



<input type="week" name="w">
The HTML5 Input type week will display the numerical version of the week denoted by a "W" along with the corresponding year.



<input type="month" name="m">
The HTML5 input type month does exactly what you might expect it to do. It displays the month. To be precise it displays the numerical version of the month along with the year.



<input type="datetime" name="dt">
The HTML5 input type Datetime displays the UTC date and time code. User can change the the time steps forward or backward in one minute increments. If you wish to display the local date and time of the user you will need to use the next example datetime-local



<input type="datetime-local" name="dtl" step="7200">
Because datetime steps through one minute at a time, you may want to change the default increment by using the attribute "step". In the following example we will have it increment by two hours by setting the attribute step to 7200 (60seconds X 60 minutes X 2).

Add a Comment

Comments

Posted Subject Comment
Thomas
August 12, 2011
Opera (10.xx) supports it "Yes. Date time is webkit only for now."

Thats not true, as Opera was the first browser that got support for date and datetime inputs. Also, webkit doesn't really support datetime inputs, as it does not display a calendar, as the spec suggests and Opera does. See http://diveintohtml5.org/forms.html#type-date for some screenshots.
Author
June 22, 2011
In reply to: sujeesh
UI development
Datetime
Yes. Date time is webkit only for now. There are rummors that IE 10 will support it and can imagine it will just be a matter of time before Firefox supports it.
sujeesh
June 22, 2011
UI development this feature is strictly browser specific.