Jquery ui datepicker sets the date range. For example, you can set the date range only after three days (implementation code) and jquerydatepicker

Jquery ui datepicker sets the date range. For example, you can set the date range only after three days (implementation code) and jquerydatepicker

Recently, the front-end of the background project uses the jquery ui calendar control and naturally uses the jquery ui datepicker.

The background data is relatively large, generally tens of millions of associated with millions of levels, the query will be very slow, so you want to add more filter conditions after adding, the time must be set as required,

The product requires the calendar control to make a query within three days, and the calendar control must make such a requirement, if the previous calendar control selected September 1, 2013

The following calendar controls can only be selected: January 1, September 1, 2013, January 1, September 2, 2013, or January 1, September 3, 2013. If you want to ask him to give a prompt, the leader must do this.

I am really a leader. I have been working for several years... Okay. The calendar control of jquery ui provides this function, which is very powerful.

First go to the official online (http://jqueryui.com/download! Version = 1.9.2) download the jquery ui package. I use version 1.92.

After the download

Introduction:

<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 startDate is selected, set the minimum time and maximum time of endDate. option = "minDate "; // minimum time var selectedTime = getTimeByDateStr (selectedDate); var minTime = selectedTime; // the minimum time is the time selected by the first calendar control targetDate = new Date (minTime ); // set the maximum end time optionEnd = "maxDate "; // because the query can only be performed within three days, the current time interval is 2 days plus 2*24*60*60*1000 targetDateEnd = new Date (minTime + 2*24*60*60*1000 );} else {// if you have selected the minimum and maximum time options for the end time (endDate) to set the start time (startDate) = "maxDate "; // maximum time var selectedTime = getTimeByDateStr (selectedDate); var maxTime = selectedTime; targetDate = new Date (maxTime); // set the 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 the start time of function checkTimeInOneMonth (startDate, endDate) {var startTime = getTimeByDateStr (startDate ); var endTime = getTimeByDateStr (endDate); if (endTime-startTime)> 2*24*60*60*1000) {return false;} return true ;} // obtain the time function 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 new Date (year, month, day ). getTime ();} </script> <input type = "text" value = "" name = "startDate" readonly = "true" id = "startDate" title = "Date range cannot exceed 3 days" /> <input type = "text" value = "" name = "endDate" readonly = "true" id = "endDate" title = "Date range cannot exceed 3 days"/>

The above Jquery ui datepicker sets the date range. For example, if you can only [Implement Code] three days later, it is all the content shared by the editor. I hope you can give it a reference, we also hope that you can support the customer's home.