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-05 9:00有人保留了一些东西，但是在2017-12-05 9:30我可以创建预订。当我设置上限时，我无法点击此特定日期并选择其他时间。有没有可能这样做？还是另一个插件？

Answer 1

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

以下是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日期时间。

DateTimePicker，如预订系统

1 个答案: