jquery UI DatePicker Start date and end date checksum

1. Introduction

In a previous project, I used jquery datepicker to see some examples on the web, but not complete.
http://blog.csdn.net/redarmy_chen/article/details/7400723

This is a similar example, but not complete, datetext type date, how to construct the JavaScript API for the date lookup, and set the start date and end date only step by step 2. Introducing Jquery-us.css, Jquery-ui.js

<link rel= "stylesheet" href= "Http://code.jquery.com/ui/1.9.2/themes/redmond/jquery-ui.css"/>
< Script type= "Text/javascript" src= "Http://code.jquery.com/ui/1.9.2/jquery-ui.js" ></script>

3. Define start and end dates

<input type= "text" readonly= "readonly" placeholder= "0000-00-00" "1" name= "StartDate" id= "StartDate" class= "In-put" DatePicker "value=" "/>
<input type=" text "readonly=" readonly "placeholder=" 0000-00-00 "name=" EndDate "id=" EndDate "class=" In-put datepicker "value=" "/>"

4. Set DatePicker

$.datepicker.regional[' ZH-CN '] = {cleartext: ' Clear ', ' 2 ' clearstatus: ' Purge selected date ', ' 3 ' Closetext: ' Close ', Closestatus: ' Do not change the current selection ', Prevtext: ' < last month ', Prevstatus: ' Show last month ', Prevbigtext: ' <& lt; ', Prevbigstatus: ' Show last year ', Nexttext: ' Next month > ', Nextstatus: ' Show next month ', Nextbigtext: ' &G  T;> ', Nextbigstatus: ' Show next year ', Currenttext: ' Today ', Currentstatus: ' Show this month ', MonthNames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December ', monthnamesshort: [' January ', ' February ', ' March ', ' April ', ' May ', ' 6 Month ', ' July ', ' August ', ' September ', ' October ', ' November ', ' December '], monthstatus: ' Select Month ', Yearstatus: ' Select Year ', Weekheader: ' Zhou ' , Weekstatus: ' Week of the Year ', DayNames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '], daynamesshort: [' Week  
        Day ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '], daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '], Daystatus: ' Set DD to start of Week ', Datestatus: ' ChooseChoose M-month D-Day, DD ', DateFormat: ' Yy-mm-dd ', firstday:1, Showbuttonpanel:true, Initstatus: '  
        Please select the date ', isrtl:false}; $.datepicker.setdefaults ($.datepicker.regional[' ZH-CN '));

5. Set up the StartDate DatePicker, including the Onselect event

$ ("#startDate"). DatePicker ({  
	        onselect:function (starttext,endtext) {
	        	endtext=$ (' #endDate '). Val ();
	        	if (endtext!= ') {
	        		starttext=$ (' #startDate '). Val ();
	        		if (starttext!= ') {
		        		var start=new Date (); "4"
	        			var start_month=parseint (starttext.substring (5,7))-1; "5"
	        			Start.setfullyear (starttext.substring (0,4)); "6"
	        			start.setmonth (start_month);
	        			Start.setdate (starttext.substring (8,10));
	        			
	        			var end=new Date ();
	    				var end_month=parseint (endtext.substring (5,7))-1;
	    				End.setfullyear (endtext.substring (0,4));
	    				End.setmonth (end_month);
	    				End.setdate (endtext.substring (8,10));
	    				
	 	       			$ (' #endDate '). DatePicker (' option ', ' mindate ', start); "7"}}}  
	    ); 

6. Set EndDate DatePicker, similar to the 4th

$ ("#endDate"). DatePicker ({onselect:function (starttext,endtext) {starttext=$ (' #startDate '). val    
                ();
                    if (starttext!= ') {endtext=$ (' #endDate '). Val ();
                        if (endtext!= ') {var end=new Date ();
                        var end_month=parseint (endtext.substring (5,7))-1;
                        End.setfullyear (endtext.substring (0,4));
                        End.setmonth (End_month);
                        
                        End.setdate (endtext.substring (8,10));
                        var start=new Date ();
                        var start_month=parseint (starttext.substring (5,7))-1;
                        Start.setfullyear (starttext.substring (0,4));
                        Start.setmonth (Start_month);
                        
                        Start.setdate (starttext.substring (8,10));
              $ (' #startDate '). DatePicker (' option ', ' maxdate ', End '); "8"      }
                }
            } 
        }); 

7.PS (note)

"1" placeholder is a new feature of HTML5, which is to display the message in the input box
"2" Clear time display text, seemingly does not work, originally wanted to set the time to clear the current input, DatePicker API does not seem to this setting
"3" Clears the state, with "2", also does not work
"4" JavaScript is similar in date, there is no construction method, so set time can only pass the corresponding setter method
"5" Here to note that the month is starting from 0, that is 0~11
"6" is recommended in setFullYear (year) instead of Setyear (year)
"7" After the date is selected in the start date, the minimum date to set the end date is the current selection start date, and the effect is that when you set the start date, the selection end date is less than the start date and is not clickable
"8" Similarly, after the end date is selected, the maximum date for the set start date is the currently selected end date, and the effect is that when you set the end date, the selected start date is greater than the end date and cannot be clicked 8. RELATED LINKS

http://api.jqueryui.com/datepicker/#option-showbuttonpanel
http://blog.csdn.net/redarmy_chen/article/details/7400723
Http://www.w3school.com.cn/js/jsref_obj_date.asp