HTML5 Date Selector-an example of a datepicker that calls the phone

Source: Internet
Author: User
Tags datetime file upload numeric local time


Make a HTML5 page to modify the profile column and need to modify the personal birthday date. In addition to using the Phonegap/cordova API to invoke, in fact, directly using the HTML5 input tag properties can be achieved.

Type of input in HTML4
Some of the commonly used types in HTML4
Button: Defines clickable buttons (mostly used with JavaScript to start scripts)
CheckBox: Defining check boxes
File: Define input fields and "Browse ..." button for file upload
Hidden: Define hidden input fields
Image: Defining images as Submit buttons
Password: Defines the password field. The characters in the field are obscured.
Radio: Defining radio buttons
Reset: Define reset button: The reset button resets all form fields to their original values.
Submit: Define submission button, submit button to send data to server.
Text: Default. Defines a single-line input field in which the user can enter text. The default is 20 characters.
New input type in HTML5
HTML5 has more than one new form input type. The new features provide better input control and validation, including the following new input types:
Email: Define text fields for e-mail addresses
Number: Defines a numeric field with a spinner control
Range: Defines a numeric field with a slider control.
Date: Defines a day field (with Calendar control)
Datatime: Defining date fields with calendar and Time controls
Datetime-local: Defining date fields with calendar and Time controls
Month: Month for defining date fields (with Calendar control)
Week: Week with date field defined (with Calendar control)
Time: Defines the hour, minute, and second of the Date field (with Times control)
Search: Defines a text field for searching.
Color: Defining Color Picker
Tel: Defines a text field for phone numbers
URL: Defines a text field for a URL
The DatePicker in the HTML5
HTML5 has multiple new input types available for selecting dates and times:
date– Select Day, month, year
month– Select Month, year
week– Select Zhou
time– selection time (hours and minutes)
datetime– Select time, day, month, year (UTC time)
datetime-local– Select time, day, month, year (local time)

Small example:

Html:
<input type= "Date" >

To modify the custom CSS for the default style:

input{Border:none;background:rgba (0,0,0,0); color: #9a9a9a;}
will show the date of the year, the effect of this Code on Chrome:



Html5-data
The effect on iphone5s and iOS8:



HTML5 Date Effect

Mobile phone-Side selection menu HTML:

<span> Careers </span>

<select>
<option value = "Volvo" > Student </option>
<option value = "Saab" > Teachers </option>
<option value= "Opel" > Office workers </option>
<option value= "Audi" > Boss </option>
<option value = "Volvo" > Civil servants </option>
<option value = "Saab" > Free Occupations </option>
<option value= "Opel" > Retirement </option>
<option value= "Audi" > Other </option>
</select>

The effect on iphone5s and iOS8:

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.