Jquery UI DatePicker Set date range, such as "implement Code" only every 3 days _jquery

The most recent back-end project uses the jquery UI Calendar control to naturally use the jquery UI DatePicker

Background data is very large, generally tens and millions association, the query will be very slow, so after adding some filter conditions, which time to set to be required,

Products to be called Calendar control can only do 3 days of query, and calendar control to make such a request, if the previous calendar control selected September 1, 2013

The following calendar control can only choose September 1, 2013, September 2, 2013, September 3, 2013, all the other can not choose, would have asked him to give hints, the leadership must do so

Really leadership word, the code work hard for several years ah ... Okay, okay. The jquery UI Calendar controls provide this functionality and are powerful

First go to the official website (http://jqueryui.com/download/) to download the jquery UI Package I'm using the 1.92 version.

After the download is ready

Introduced:

<link href= "Jquery-ui/1.9.2/css/smoothness/jquery-ui-1.9.2.custom.min.css" rel= "stylesheet" type= "Text/css"/ > <script type= "text/javascript" src= "Jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.js" ></script> < Script type= "Text/javascript" src= "jquery-ui/1.9.2/datepicker-init.js" ></script> <script type= "text/"
 JavaScript "> $ (function () {var dates = $ (" #startDate, #endDate ");
 var option;
 var targetdate;
 var optionend;
 var targetdateend; Dates.datepicker ({showbuttonpanel:false, onselect:function (selectedDate) {if (this.id = "StartDate") {//If selected Optional start time (startdate) Set end time (enddate) Minimum time and maximum time option = "MinDate";
   Minimum time var selectedtime = Gettimebydatestr (selectedDate);
	 var mintime = Selectedtime; 
   The minimum time is to open the first calendar to control the selected time TargetDate = new Date (mintime);
	 Set the maximum time of end time Optionend = "MaxDate";
   Because can only do three days of query so it is interval 2 days the current time plus 2*24*60*60*1000 targetdateend = new Date (mintime+2*24*60*60*1000); }else{//If the end time is selected (EndDate) setThe minimum time and maximum time of the set start time (startdate) option = "MaxDate";
   Max time var selectedtime = Gettimebydatestr (selectedDate);
   var maxtime = Selectedtime;
   targetdate = new Date (maxtime);
   Set minimum Time Optionend = "MinDate";
   Targetdateend = new Date (maxtime-2*24*60*60*1000); 
   } dates.not (this). DatePicker ("option", option, targetdate); 
  Dates.not (This). DatePicker ("option", Optionend, Targetdateend);
}
 });
 Check start time cannot exceed 3 days function checktimeinonemonth (StartDate, EndDate) {var starttime = gettimebydatestr (startdate);
 var endtime = gettimebydatestr (EndDate);
 if ((endtime-starttime) > 2*24*60*60*1000) {return false;
return true;
 ////Time function based on date string Gettimebydatestr (DATESTR) {var year = parseint (datestr.substring (0,4));
 var month = parseint (datestr.substring (5,7), 10)-1;
 var day = parseint (datestr.substring (8,10), 10);
Return to New Date (year, month, day). GetTime (); } </script> <input type= "text" value= "name= startdate" readonly= "true" id= "StartDate" title= "date range cannot be greater than 3 days"/><input type= "text" value= "name=" EndDate "readonly=" true "id=" EndDate "title=" date range cannot be greater than 3 days "/> 

This jquery UI DatePicker set date range, such as only 3 days to "implement the Code" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.