代码之家 › 专栏 › 技术社区 › nielsv

选项从引导数据库禁用日期时间选择器不工作

eonasdan-datetimepicker momentjs twitter-bootstrap jquery javascript

nielsv · 技术社区 · 8 年前

我正在使用 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
});

我找到了选择 disabledDates 在 documentation .

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

但我认为这不会是问题,对吗?

2 回复 | 直到 8 年前

VincenzoC 8 年前

您正在 弃用警告 由于日期字符串的格式不可识别(ISO 8601或RFC 2822),因此必须使用 moment(String, String) . 在你的情况下,你可以 moment("17/12/2017", 'D/M/YYYY') .

要将默认日期设置为datetimepicker,请使用 defaultDate 选项而不是 date (前者被记录在案,而后者则没有,即使两者似乎都起作用)。

确保您的 默认日期 , minDate , disabledDates 和 daysOfWeekDisabled 一致性,另请参见 useCurrent 文档。

设置 默认日期 至启用日期,以防止出现以下情况:

Uncaught尝试了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>