Bootstrap datetimepicker 禁用未来的日期和时间答案

【问题标题】：Bootstrap datetimepicker disable future date and timeBootstrap datetimepicker 禁用未来的日期和时间
【发布时间】：2018-01-24 17:15:16
【问题描述】：

我正在尝试使用 disabledTimeIntervals 禁用今天内未来的几个小时，但它似乎不起作用。

我需要做的是仅在今天禁用时间选择器中的未来时间，因为我可以使用 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/

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-datetimepicker

【解决方案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/Y H: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">

【讨论】：

也许可以通过 ajax 捕捉日期变化并重新应用 maxTime？

【解决方案2】：

您在 jsfiddle 中使用的 datetimepicker 没有 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})
    }
  }
});

【讨论】：