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

Question

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

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

我们将不胜感激。

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

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

您发现了这个错误 #1075 of the js library bootstrap-datetimepicker。幸运的是，解决方案非常简单，当您创建第二个 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

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

BootStrap DateTimePicker on dp.change fires both pickers

jquery

datetimepicker

twitter-bootstrap