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).
Let's get into contact so you learn more about us and we can create solutions for you!