jquery Date Selection DatePicker Plug-in usage example analysis

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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

$.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: ' &L t;< ', Prevbigstatus: ' Show last year ', Nexttext: ' Next month > ', Nextstatus: ' Show next month ', Nextbigtext: ' >> ', Nextbigstatus: ' Show next year ' , Currenttext: ' Today ', Currentstatus: ' Show this month ', monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' ' December '], monthnamesshort: [' A ', ' two ', ' three ', ' four ', ' five ', ' six ', ' seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 ', Monthstatus: ' Select Month ', Yearstatus: ' Select Year ' , Weekheader: ' Zhou ', Weekstatus: ' 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 ', DateFormat: ' 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:

?

1 2	<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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

var $start _date_value = "January 1, 2012";//TODO change to a 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/ Calendar.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 = d Atetext; //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.