Jquery ui datepicker définit la plage de dates, par exemple, elle ne peut être séparée que de 3 jours [Code d'implémentation]_jquery

Le front-end du récent projet backend utilise le contrôle de calendrier jquery ui, donc naturellement il utilise le sélecteur de date de jquery ui

Les données d'arrière-plan sont assez volumineuses, généralement avec des dizaines de millions et des millions de connexions, et la requête sera très lente, je souhaite donc ajouter plus de conditions de filtrage plus tard, et l'heure doit être définie selon les besoins,

Le produit doit faire en sorte que le contrôle de calendrier ne puisse interroger que dans un délai de 3 jours, et le contrôle de calendrier doit répondre à cette exigence si le contrôle de calendrier précédent sélectionne le 1er septembre 2013

.

Le contrôle du calendrier à l'arrière ne peut sélectionner que le 1er septembre 2013, le 2 septembre 2013 et le 3 septembre 2013. Toutes les autres dates ne peuvent pas être sélectionnées. Je voulais au départ lui demander de faire un rappel, mais le leader a insisté. sur ça. Putain

Comme l'a dit le dirigeant, les codeurs travaillent dur depuis plusieurs années. . . Eh bien, heureusement, le contrôle de calendrier de jquery ui fournit cette fonction, qui est très puissante

Allez d'abord sur le site officiel (http://jqueryui.com/download/#!version=1.9.2) pour télécharger le package jquery ui. J'utilise la version 1.92

.

Après le téléchargement

Présentation :

<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天"/>

L'article ci-dessus Jquery ui datepicker définit la plage de dates, si elle ne peut être séparée que de 3 jours [Code d'implémentation] est tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous donner une référence, et j'espère que vous le ferez. prend en charge Script Accueil.