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