HTML5 Time Picker

HTML5 Date input type (date) share share share share sharing

In many pages and Web applications have entered the date and time of the place, the most typical is the booking of air tickets, train tickets, hotels, pizza and other sites.

Before HTML5, the most common scenario for such page requirements was to select components with JavaScript dates. This is almost undisputed and has no choice. You can search for a "JavaScript Date selection box" and you'll find countless optional JavaScript components. Most of these date selection components provide the ability to populate a date into a specified input box.

The date input type in HTML5 gives the browser the opportunity to implement the native calendar, from which the JavaScript version of the calendar component exits the historical stage.

The HTML5 specification only specifies the date new input type, and does not specify the implementation and style of the calendar popup. Therefore, each browser according to its own design implementation of the calendar.
Currently only Google browser fully realize the calendar function. Believe that this situation will soon be over, and all browsers will eventually provide native calendar components.

If you are using Google Chrome, you can see this beautiful date component in the example demo below. You can see the native calendar box of your browser by clicking on the input box with your mouse.

Date of Appointment:

If you are currently using a browser that has not implemented the calendar component, you can take a sneak peek at the picture below.

Without any javascript, it becomes one of the most basic input types <input type= "Date"/>

<labelFor=The meeting"> Date:  </label><input id=" meeting  "type=" Datevalue= "2014-01-13" />   

HTML5 makes web programmers ' work incredibly simple, doesn't it? Not only that, we get not only a "date" type of input, but also a series of related date, time parameters let us customize. We call this the "date" type, but here the type is actually available for "date", "Week", "month", "Time", "datetime", and "datetime-local". Below I will show you the appearance of various types with examples and graphic methods.

To be reminded, the following are in Google Chrome effect, other browsers will appear slightly different, but the function will be the same.

1. Date (<input type= "date"/>)

This is the most basic date selector and you can only select a date from the calendar.

Please select a date:

：

2. Week (<input type= "Week"/>)

At this point, your choice is not a date, but a week. Notice how the week number is displayed.

Please select week:

：

3. Month (<input type= "Month"/>)

At this point you choose the month, which is less than the "date" type and the number of days that follow.

Please select month:

：

4. Duration (<input type= "Time"/>)

This is the simplest kind of display, no calendar, only time.

Please select time:

：

5. Date + time (<input type= "datetime"/>)

Displays both the date component and the time component, which is actually a combination of the "date" type and the "timing" type.

Please select a date and time:

：

6. Local Date Time (<input type= "datetime-local"/>)

As the name implies, it is displayed in local time.

Please select a date and time:

：

In addition to the above types, the date input type has some other attributes to be aware of.

Properties	Description
Value	This is the common attribute of the INPUT element in HTML. Is the data in the input box.
Min	Minimum value for date or time
Max	The maximum value of a date or time
Step	Step. Different types have different default steps. date– default is 1 days week– default is 1 weeks month– default is January time– default is 1 minutes datetime– default is 1 minutes Local datetime– default is 1 minutes

HTML5 Time Picker