jQuery日期选择器,选择范围内的特定日期

问题描述:

我使用的是引导日期选择器,我想要制作一个特定的范围只是为了在检入和结帐领域可用,例如,你只能从5月11日的字段中选择日期到5月15日,其他领域必须停用。当前的代码确实不能在今天早些时候预订,并且您无法在签入的同一天结帐,但我需要此特定日期的功能。jQuery日期选择器,选择范围内的特定日期

 $(function(){ 
      var nowTemp = new Date(); 
      var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 

      var checkin = $('#dpd1').datepicker({ 
      onRender: function(date) { 
      return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
      } 
      }).on('changeDate', function(ev) { 
      if (ev.date.valueOf() > checkout.date.valueOf()) { 
      var newDate = new Date(ev.date) 
      newDate.setDate(newDate.getDate() + <?php echo $bsiCore->config['conf_min_night_booking']; ?>); 
      checkout.setValue(newDate); 
      //alert(newDate); 
      //alert(checkout.setValue(newDate)); 
      } 
      checkin.hide(); 
      $('#dpd2')[0].focus(); 
      }).data('datepicker'); 
      var checkout = $('#dpd2').datepicker({ 
      onRender: function(date) { 
      var checkoutdt= parseInt(checkin.date.valueOf())+(60*60*24*1000*<?php echo ($bsiCore->config['conf_min_night_booking']-1); ?>); 

      return date.valueOf() <= checkoutdt ? 'disabled' : ''; 

      } 
      }).on('changeDate', function(ev) { 
      checkout.hide(); 
     }).data('datepicker'); 
+0

什么是你的问题呢? – trevster344

+0

我的问题是,我只想要特定的和静态的日期 - 例如作为客户,我只能从5月11日至5月15日选择。其他日期已禁用。 @ trevster344我 – revetinja

可以使用datepicket属性的minDate进行检查日期,即在你的情况5月11日和的maxDate新的日期(),或在您的案件5月15日。

$('#dpd1').datepicker({ 
    minDate: new Date(2016, 05 - 1, 11), 
    maxDate: new Date() 
}); 

$('#dpd2').datepicker({ 
    maxDate: new Date() 
}); 

希望这可能有所帮助。

我为jQuery datepicker写了类似的代码,它有许多相似之处,但不一样。建立这个。

$('input').datepicker({ 
 
     beforeShowDay: function (date) { 
 
      var endDate = new Date(2017, 4, 15); 
 
      var startDate = new Date(2017, 4, 11); 
 
      if (date >= startDate && date <= endDate) { 
 
       return [false, 'my-custom-class', '']; //between 11 and 15 
 
//Set to true, and it will only apply a class to those days but allow any days to be selected 
 
      } 
 

 
      return [true, '', '']; //Default return 
 
     } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 

 
<input type='text' value=''/>

https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#beforeshowday