HTML5 Time Picker

Source: Internet
Author: User
Tags local time

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.