javascript - Bootstrap 日期时间选择器中的选项禁用日期不起作用

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 .

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

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

Answer 1

您收到弃用警告，因为您的日期字符串不是可识别的格式(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>