Question

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

但是'dp.change'时，start事件设置了两个选项。它设置了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库#1075的此错误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

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

1 个答案: