DateTimePicker 类似预订系统

Question

我需要为日期和时间准备一个输入，它可以禁用特定日期的时间。我为此准备了一个 Bootstrap 3 DateTimePicker：

$('#ScheduledAt').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    disabledDates: [
         moment("2017-12-05 9:00"),
    ],
    daysOfWeekDisabled: [0, 7],
    stepping: 30,
    enabledHours: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
})

步进是 30 分钟，所以 2017 年 12 月 5 日 9:00 有人预订了一些东西，但 2017 年 12 月 5 日 9:30 我可以创建预订。当我像上面一样设置时，我无法单击此特定日期并选择其他时间。有没有可能这样做？还是其他插件？

Answer 1

您是否尝试过使用eonasdan bootstrap-datetimepicker 的disabledtimeintervals 选项？

这是一个 CodePen：https://codepen.io/beaver71/pen/gXyrwR 显示此功能。

$('#ScheduledAt').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    toolbarPlacement: 'top',
		showClear: true, 
		showClose: true, 
		sideBySide: true,
    disabledTimeIntervals: [
      [moment("2017-12-05 8:40"),moment("2017-12-05 9:20")],
    ],
    daysOfWeekDisabled: [0, 7],
    stepping: 30,
    enabledHours: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">
      <div class="panel-body">
        <form id="srcForm">
          <div class="row">
            <div class="form-group col-xs-12">
              <label>Date</label>
              <div id="ScheduledAt" class="input-group">
                <input type="text" class="form-control" name="from">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
</div>

间隔[moment("2017-12-05 8:40"),moment("2017-12-05 9:20")] 用于禁用2017-12-05 9:00 日期时间。