Jquery ui datepicker menetapkan julat tarikh, contohnya, ia hanya boleh dipisahkan selama 3 hari [Kod pelaksanaan]_jquery

Hujung hadapan projek bahagian belakang baru-baru ini menggunakan kawalan kalendar jquery ui, jadi secara semula jadi ia menggunakan pemilih tarikh jquery ui

Data latar belakang agak besar, biasanya dengan berpuluh-puluh juta dan berjuta-juta sambungan, dan pertanyaan akan menjadi sangat perlahan, jadi saya ingin menambah lebih banyak syarat penapisan kemudian, dan masa mesti ditetapkan seperti yang diperlukan,

Produk perlu membuat kawalan kalendar supaya ia hanya boleh membuat pertanyaan dalam masa 3 hari, dan kawalan kalendar mesti memenuhi keperluan ini Jika kawalan kalendar sebelumnya memilih 1 September 2013

Kawalan kalendar di bahagian belakang hanya boleh memilih 1 September 2013, 2 September 2013, dan 3 September 2013. Semua tarikh lain tidak boleh dipilih saya pada asalnya ingin meminta dia memberi peringatan, tetapi pemimpin itu berkeras tentang ini

Seperti yang dikatakan oleh ketua, pengekod telah bekerja keras selama beberapa tahun. . . Nasib baik, kawalan kalendar jquery ui menyediakan fungsi ini, yang sangat berkuasa

Mula-mula pergi ke tapak web rasmi (

http://jqueryui.com/download/#!version=1.9.2) untuk memuat turun pakej jquery ui saya menggunakan versi 1.92

Selepas memuat turun

Pengenalan:

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

Artikel di atas Jquery ui datepicker menetapkan julat tarikh, jika ia hanya boleh dipisahkan selama 3 hari [Kod pelaksanaan] adalah semua kandungan yang dikongsi oleh editor saya harap ia dapat memberi anda rujukan, dan saya harap anda akan melakukannya menyokong Laman Utama Skrip.