Front-End development date control, HTML5 date input type (date) __html

In many pages and Web applications have entered the date and time of the place, the most typical is booking 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 the JavaScript date selector box and you'll find countless optional JavaScript components. Most of these date selection components provide the ability to populate the specified input boxes with dates.

Date JavaScript component to view:

Http://www.codeceo.com/article/8-jquery-html5-calendar.html

Http://www.cnblogs.com/xiaoyao2011/archive/2011/10/23/JSDatePicker.html

The dateinput type in HTML5 gives browsers the opportunity to implement a native calendar, from which the JavaScript version of the calendar component exits the history stage.

The HTML5 specification only sets the date new input type and does not specify the implementation and style of the Calendar pop-up box. So, each browser implements the calendar according to its own design.
Currently only Google browser fully implement the Calendar function. Believe that this situation will soon end, all browsers will eventually provide the original calendar components.

If you are using Google Browser, you can see this beautiful date component in the example below. Click on the input box with the mouse to see the browser native calendar box.

Date Date:

If your current browser has not yet implemented the calendar component, you can get a sneak peek at the image below.

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

<label for= Meeting > Appointment Date: </label><input id= "Meeting" type= "date" value= "2014-01-13"/>

HTML5 makes the work of web programmers 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 it the "date" type, but the type here is actually "date," "Week," "Month," "Time," "DateTime," and "datetime-local." I'll show you the appearance of various types with examples plus text.

Need to be reminded that the following screenshots are in Google browser effect, other browsers will display a slightly different appearance, 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:

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

At this time, you choose is not a date, but weeks. Notice how the number of weeks is displayed.

Please select week:

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

At this time you choose the month, compared with the "date" type is less than the number of days behind.

Please select the month:

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

This is the simplest kind of display, there is no calendar, only time can be selected.

Please select the time:

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

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

Please select a date and time:

Screenshots:

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

As the name suggests, is to use local time display.

Please select a date and time:

Screenshots:

In addition to the above types, there are some other attributes that need to be noted for date input types.

attributes	description
value	This is the common property of the input element in HTML. Is the data in the input box.
min	date or time minimum
max	maximum value for date or time
step	steps. Different types have different default step sizes. 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