Bootstrap datetimepicker 禁用未來的日期和時間

Question

我試圖在今天使用disabledTimeIntervals禁用未來的時間，但它似乎不起作用。

我需要做的是僅在今天禁用 timepicker 中的未來小時數，因為禁用日期我可以用 maxDate 來完成。

<input class="form-control input-sm pull-left " id="dp" placeholder="To" type="text">

$('#dp').datetimepicker({
  maxDate: '0',
  disabledTimeIntervals: [[moment(), moment().hour(24).minutes(0).seconds(0)]],
  format: 'm/d/Y H:i A',
  timepicker: true,
});

JSFIDDLE： https ://jsfiddle.net/3oxmccjq/1/

Answer 1

您可以使用maxTime選項和函數onChangeDateTime根據所選日期設置 minTime。

• 日期之間的比較取決於您:-)

 var today = new Date(); var options = { maxDate: new Date(), maxTime: new Date(), disabledTimeIntervals: [ [moment(), moment().hour(24).minutes(0).seconds(0)] ], format: 'm/d/YH:i A', timepicker: true, onChangeDateTime: function(date) { // Here you need to compare date! this is up to you :-) if (date.getDate() === today.getDate()) { this.setOptions({maxTime: new Date()}); } else { this.setOptions({maxTime: false}); } } }; $('#dp').datetimepicker(options);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.css" rel="stylesheet" /> <input class="form-control input-sm pull-left " id="dp" placeholder="To" type="text">

Answer 2

您在 jsfiddle 中使用的 datetimepicker 沒有作為disabledTimeIntervals選項，這就是它disabledTimeIntervals的原因。 你應該使用disabledMinTime和disabledMaxTime

至於解決方案，我猜您想禁用今天的所有未來時間，但仍希望在所有可能的時間內允許未來的日期。 這是相同的jsfiddle：-

https://jsfiddle.net/sahilbatla/zpzL2po3/

代碼如下所示：-

var today = new Date();
var todayEndOfDay = new Date().setHours(23,59,59,999);
$('#dp').datetimepicker({ 
  disabledMinTime: today,
  disabledMaxTime: todayEndOfDay,
  format: 'm/d/Y H:i A',
  timepicker: true,
  onChangeDateTime: function(date) {
    if (date.getDate() !== today.getDate()) {
      this.setOptions({disabledMinTime: false, disabledMaxTime: false}) 
    } else {
      this.setOptions({disabledMinTime: today, disabledMaxTime: todayEndOfDay})
    }
  }
});