Jquery UI Datepicker legt den Datumsbereich fest. Er kann beispielsweise nur durch 3 Tage getrennt werden [Implementierungscode]_jquery

Das Frontend des aktuellen Backend-Projekts verwendet die Kalendersteuerung von jquery ui, also natürlich die Datumsauswahl von jquery ui

Die Hintergrunddaten sind ziemlich groß, normalerweise mit Dutzenden und Abermillionen von Verbindungen, und die Abfrage wird sehr langsam sein, daher möchte ich später weitere Filterbedingungen hinzufügen und die Zeit muss nach Bedarf eingestellt werden,

Das Produkt muss die Kalendersteuerung so gestalten, dass sie nur innerhalb von 3 Tagen abfragen kann, und die Kalendersteuerung muss diese Anforderung erfüllen, wenn die vorherige Kalendersteuerung den 1. September 2013 auswählt

Mit der Kalendersteuerung auf der Rückseite können nur der 1. September 2013, der 2. September 2013 und der 3. September 2013 ausgewählt werden. Alle anderen Daten können nicht ausgewählt werden. Ursprünglich wollte ich ihn um eine Erinnerung bitten, aber der Leiter bestand darauf dazu. Scheiße

Wie der Leiter sagte, haben Programmierer mehrere Jahre lang hart gearbeitet. . . Glücklicherweise bietet die Kalendersteuerung von jquery ui diese Funktion, die sehr leistungsfähig ist

Gehen Sie zunächst zur offiziellen Website (http://jqueryui.com/download/#!version=1.9.2), um das JQuery-UI-Paket herunterzuladen. Ich verwende Version 1.92

Nach dem Herunterladen

Einführung:

<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"){
   // 如果是选择了开始时间（startDate）设置结束时间（endDate）的最小时间和最大时间
   option = "minDate"; //最小时间
   var selectedTime = getTimeByDateStr(selectedDate);
   var minTime = selectedTime;
	 //最小时间 为开第一个日历控制选择的时间
   targetDate = new Date(minTime); 
   //设置结束时间的最大时间
   optionEnd = "maxDate";
	 //因为只能做三天内的查询 所以是间隔2天 当前时间加上2*24*60*60*1000
   targetDateEnd = new Date(minTime+2*24*60*60*1000);
   }else{
   // 如果是选择了结束时间（endDate）设置开始时间（startDate）的最小时间和最大时间
   option = "maxDate"; //最大时间
   var selectedTime = getTimeByDateStr(selectedDate);
   var maxTime = selectedTime;
   targetDate = new Date(maxTime);
   //设置最小时间 
   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); 
  }
 });
// 检查起始时间不能超过3天
function checkTimeInOneMonth(startDate, endDate){
	var startTime = getTimeByDateStr(startDate);
 var endTime = getTimeByDateStr(endDate);
 if((endTime - startTime) > 2*24*60*60*1000){
  return false;
 }
 return true;
}


//根据日期字符串取得其时间
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="日期范围不能大于3天"/><input type="text" value="" name="endDate" readonly="true" id="endDate" title="日期范围不能大于3天"/>

Der obige Artikel „JQuery UI Datepicker“ legt den Datumsbereich fest. Wenn er nur durch 3 Tage getrennt werden kann, enthält der [Implementierungscode] den gesamten Inhalt, der vom Herausgeber geteilt wird unterstützt Script Home.