dp.change 上的 BootStrap DateTimePicker 会触发两个选择器

Question

我有两个输入开始日期和结束日期。在开始“dp.change”时，我想设置结束日期的 minDate，在“dp.change”结束时设置开始日期的 maxDate。

但启动事件在 'dp.change' 时设置了两个选项。它设置了它的 maxDate，所以我不能选择比......现在更大的日期。我不明白为什么。

任何帮助将不胜感激。

HTML

<div class="col-md-3">
  <div class="form-group">
    <label>{l s='From :' mod='everrent'}</label>
    <div class='input-group date' id='start_time'>
        <input type="text" class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
  </div>
</div>
<div class="col-md-3">
  <label>{l s='To :' mod='everrent'}</label>
  <div class="form-group">
    <div class='input-group date' id='end_time'>
        <input type="text" class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
  </div>
</div>

JS

$(document).ready(function(){
  /* Initialise DateTimePickers */
  $('#start_time').datetimepicker({
    locale: 'fr',
    format: 'YYYY/MM/DD - H:mm',
    sideBySide: true,
    stepping: 5
  });
  $('#end_time').datetimepicker({
    locale: 'fr',
    format: 'YYYY/MM/DD - H:mm',
    sideBySide: true,
    stepping: 5
  });
  /* Setting up DateTimePickers */
  $('#start_time').on('dp.change', function(e) {
    $('#start_time').data("DateTimePicker").minDate(new Date());
    $('#end_time').data("DateTimePicker").minDate(e.date);
  });
  $('#end_time').on('dp.change', function(ev) {
    $('#start_time').data("DateTimePicker").maxDate(ev.date);
  });
});

Answer 1

我知道这个问题有一段时间了，但迟到总比没有好，对吧？

您在 js 库 bootstrap-datetimepicker 中发现了此错误 #1075。幸运的是，解决方案非常简单，当您创建第二个 datetimepicker 对象 (#end_time) 时，您必须将属性 useCurrent 设置为 false，如下所示：

/* Initialise DateTimePickers */
  $('#start_time').datetimepicker({
    locale: 'fr',
    format: 'YYYY/MM/DD - H:mm',
    sideBySide: true,
    stepping: 5
  });
  $('#end_time').datetimepicker({
    locale: 'fr',
    format: 'YYYY/MM/DD - H:mm',
    sideBySide: true,
    stepping: 5,
    useCurrent: false //<--- this change
  });
  /* Setting up DateTimePickers */
  $('#start_time').on('dp.change', function(e) {
    $('#start_time').data("DateTimePicker").minDate(new Date());
    $('#end_time').data("DateTimePicker").minDate(e.date);
  });
  $('#end_time').on('dp.change', function(ev) {
    $('#start_time').data("DateTimePicker").maxDate(ev.date);
  });

看到这个：JSFiddle