Bootstrap datetimepicker禁用将来的日期和时间 [英] Bootstrap datetimepicker disable future date and time

问题描述

我正在尝试使用disabledTimeIntervals禁用今天以后的时间，但是它似乎不起作用.

I am trying to disable future hours within today using disabledTimeIntervals but it doesn't seem to work.

我需要做的是仅在今天禁用将来的小时选择器，因为禁用日期可以使用maxDate完成.

What I need to do is disable future hours in timepicker for today only, because disabling dates I can do with 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/

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

推荐答案

您可以使用maxTime选项和功能onChangeDateTime根据所选日期设置分钟时间.

You can use maxTime option and function onChangeDateTime to set the minTime according to the selected date.

• 日期之间的比较取决于您:-)

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

这篇关于Bootstrap datetimepicker禁用将来的日期和时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！