JavaScript: Use of date selector components

Source: Internet
Author: User

Objective:

In actual project development, date selection is a very common and important issue, in the form of design to date validation, if you let the user input time, then it is not advisable to use the regular to verify its correctness, because he generally can only verify the format of the date, can not accurately verify its date correctness. You can now use the date selector component to help us complete.

Usage:

The use of dates in the selection of their components is actually very simple, we only need to introduce the date selector in the *.html file *.js file, and in the input box to set the ' onclick ' event.

Demonstrate:

Now I use two date selector components to demonstrate:

The first one is: my97datepicker, download link: http://files.cnblogs.com/files/XYQ-208910/My97DatePickerBeta.zip

The second is a custom date selector code that I put in the mycustomdatepicker file: Download link: http://files.cnblogs.com/files/XYQ-208910/MyCustomDatePicker.zip

The test code is as follows:

Mode one: Use My97datepicker

Pickddate.html

<!DOCTYPE html><HtmlLang= "ZH-CN"><Head><MetaCharSet= "UTF-8"><MetaName= "description"Content= "Pick date!"><MetaName= "keywords"Content= "Javascript,html,css"><!--IntroductionJS file for My97datepicker date component-<ScriptType= "Text/javascript"Src= "My97datepicker/wdatepicker.js"></Script><Title> Use of Date Selectors</Title></Head><Body><!--triggering eventsUsing the My97datepicker date component--> <font color= "green" >pick date:< Span style= "COLOR: #0000ff" ></font><input type= "text"  Onclick=" Wdatepicker () " Readonly= "readonly" ></body></ html>>        

Mode two: Use Mycustomdatepicker

Pickddate.html

<!DOCTYPE html><HtmlLang= "ZH-CN"><Head><MetaCharSet= "UTF-8"><MetaName= "description"Content= "Pick date!"><MetaName= "keywords"Content= "Javascript,html,css"><!--The introduction of using a custom date component is a file-<ScriptType= "Text/javascript"Src= "Mycustomdatepicker/calendar.js"></Script><Title> Use of Date Selectors</Title></Head><Body><!--Trigger Event Usage Date Component--> <font color= "Red" >pick Date:</font><input type=" text "  Onclick= "Fpopcalendar (event,this,this)"  Readonly=" readonly "> </body> </html>>  

Full code Download:http://files.cnblogs.com/files/XYQ-208910/pickDate.zip

JavaScript: Use of date selector components

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.