引导程序 datetimepicker 中的选项 disabledDates 不起作用答案

【问题标题】：Option disabledDates from bootstrap datetimepicker not working引导程序 datetimepicker 中的选项 disabledDates 不起作用
【发布时间】：2017-12-14 09:05:21
【问题描述】：

我正在为我的日历使用bootstrap datetimepicker。我的代码如下所示：

var sundaysDisabled = [
  moment("17/12/2017"),
  moment("7/1/2018"),
  moment("14/1/2018"),
  moment("21/1/2018"),
  moment("28/1/2018"),
  moment("4/2/2018")
];

$("#form_dateTakeout").datetimepicker({
  inline: true,
  format: 'L',
  daysOfWeekDisabled: daysDisabled,
  disabledDates: sundaysDisabled,
  date: selectDate,
  minDate: tomorrow
});

我在documentation 中找到了选项disabledDates。

问题是这些天我仍然可以选择，我只收到这个警告：

但我认为这不可能是问题，对吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap momentjs eonasdan-datetimepicker

【解决方案1】：

您收到弃用警告，因为您的日期字符串不是可识别的格式（ISO 8601 或 RFC 2822），您必须使用 moment(String, String)。在你的情况下，你可以有类似moment("17/12/2017", 'D/M/YYYY')的东西。

要为 datetimepicker 设置默认日期，请使用 defaultDate 选项而不是 date（第一个记录在案，而后者没有记录，即使两者似乎都有效）。

确保您的 defaultDate、minDate、disabledDates 和 daysOfWeekDisabled 是一致的，另请参阅 useCurrent 文档。

将defaultDate 设置为启用日期以防止出现以下情况：

未捕获尝试了 7 次以找到有效日期

这里是一个完整的例子：

var sundaysDisabled = [
  moment("17/12/2017", 'D/M/YYYY'),
  moment("7/1/2018", 'D/M/YYYY'),
  moment("14/1/2018", 'D/M/YYYY'),
  moment("21/1/2018", 'D/M/YYYY'),
  moment("28/1/2018", 'D/M/YYYY'),
  moment("4/2/2018", 'D/M/YYYY')
];

var tomorrow = moment().add(1, 'd').startOf('d');
var daysDisabled = [3]; //e.g. disable all wednesday
var selectDate = moment().add(1, 'week').day(2); // e.g. select next tuesday
$("#form_dateTakeout").datetimepicker({
  inline: true,
  format: 'L',
  daysOfWeekDisabled: daysDisabled,
  disabledDates: sundaysDisabled,
  defaultDate: selectDate,
  minDate: tomorrow
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
  <div class="row">
    <div class="col-md-8">
      <div id="form_dateTakeout"></div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

问题出在moment()函数的使用上。

注意：

moment("17/12/2017").isValid() --> 返回 false

moment("12/17/2017").isValid() --> 返回 true

您也可以使用这种格式：

moment("17/12/2017", "DD/MM/YYYY").isValid()--> 返回 true

在这里查看：https://momentjs.com/

在这个工作的 CodePen 上验证：https://codepen.io/beaver71/pen/PEqYMv

【讨论】：

然后我收到此错误：未捕获尝试 7 次以找到有效日期
你检查过 CodePen 吗？