jquery Date Selection DatePicker Plug-in usage example analysis _jquery

This example describes the jquery date selection DatePicker plug-in usage. Share to everyone for your reference. Specifically as follows:

1, first of jquery in the DatePicker plug-ins in the relevant attribute values to Chinese:

$.datepicker.regional[' ZH-CN '] = {cleartext: ' Clear ', Clearstatus: ' Purge selected date ', Closetext: ' Close ', Closestatus: ' Do not change Current selection ', Prevtext: ' < last month ', Prevstatus: ' Show last month ', Prevbigtext: ' << ', Prevbigstatus: ' Show last year ', Nexttext: ' Next month > ', Nextstatus: ' Show next month ', Nextbigtext: ' >> ', Nextbigstatus: ' Show next year ', Currenttext: ' Today ', Currentsta Tus: ' Show this month ', monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December ', monthnamesshort: [' One ', ' two ' , ' three ', ' four ', ' five ', ' six ', ' seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 ', Monthstatus: ' Select Month ', Yearstatus: ' Select Year ', Weekheader: ' Zhou ', weekst ATUs: ' Every week of the year ', DayNames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '], daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday, ', ' Thursday ', ' Friday ', ' Saturday '], daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], Daystatus: ' Set DD to start of Week ', Datestatus: ' Select M-month D-Day, DD ', Datef
Ormat: ' Yy-mm-dd ', firstday:1, initstatus: ' Please select Date ', Isrtl:false}; 

 $.datepicker.setdefaults ($.datepicker.regional[' ZH-CN '));

2, the HTML page has two date input boxes, respectively, the start date and end Date:

<label for= "Start-datepicker" > Start date:</label> <input type= "text" class= "DatePicker Test-image-datepicker "id=" Start-datepicker "size="/> <label for=
"End-datepicker" > End Date: </label > <input type= "text" class= "DatePicker test-image-datepicker" id= "End-datepicker" size= "/>"

3, invoke the modified DatePicker plug-ins:

 var $start _date_value = "January 1, 2012";//TODO changed to configurable var $end _date_value = new Date (); When document has loaded, initialize pagination and form $ (document). Ready (function () {$ (". Imagezz"). Click ($test _image
 _check_box_click); $ (". Test-image-datepicker"). DatePicker ({changemonth:true, changeyear:true, Showon: "Both", Buttonimage: "images/c Alendar.gif ", Buttonimageonly:true, Showbuttonpanel:true, Onselect:function (Datetext, inst) {if ($ (this). attr (" id
   = = = "Start-datepicker") {$start _date_value = Datetext;
   } if ($ (this). attr ("id") = = "End-datepicker") {$end _date_value = Datetext;
//Below you can write some of the changes in the page related to the date of the function//...}
});
$ (". Test-image-datepicker"). DatePicker ("option", "DateFormat", "yy year mm month DD Day");
$ ('. Test-image-datepicker '). attr ("ReadOnly", "ReadOnly");
$ ("#start-datepicker"). DatePicker ("Setdate", $start _date_value); 
$ ("#end-datepicker"). DatePicker ("Setdate", $end _date_value); 

DatePicker the remaining options and methods are detailed in the following: http://api.jqueryui.com/datepicker/

I hope this article will help you with your jquery programming.