来自 bootstrap datetimepicker 的选项 disabledDates 不工作

Question

我正在使用 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。

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

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

Answer 1

问题出在 moment() 函数用法中。

关注：

moment("17/12/2017").isValid() --> returns 假

moment("12/17/2017").isValid() --> returns 真

或者您可以使用这种格式：

moment("17/12/2017", "DD/MM/YYYY").isValid() --> returns 真

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

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

Answer 2

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

要为日期时间选择器设置默认日期，请使用 defaultDate 选项而不是 date（前者已记录，后者未记录，即使看起来两者都有效）。

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

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

Uncaught Tried 7 times to find a valid date

这里有一个完整的例子：

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>

来自 bootstrap datetimepicker 的选项 disabledDates 不工作

Option disabledDates from bootstrap datetimepicker not working

javascript

jquery

twitter-bootstrap

momentjs

eonasdan-datetimepicker