2017-04-20 196 views
0

我使用的是引導日期選擇器,我想要製作一個特定的範圍只是爲了在檢入和結帳領域可用,例如,你只能從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

回答

0

可以使用datepicket屬性的minDate進行檢查日期,即在你的情況5月11日和的maxDate新的日期(),或在您的案件5月15日。

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

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

希望這可能有所幫助。

0

我爲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