Eonasdan Bootstrap 链接的日期时间选择器未按预期工作

Question

我的情况是用户只能select 7 天的日期范围。

所以如果开始日期是 01-02-2016 00:00 最大结束日期应该是 06-02-2016 23:59

那么如果用户 selects 08-02-2016 00:00 最大结束日期应该是 14-02-2016 23:59

为此，我使用了日期时间选择器：http://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

我遇到的问题是当我执行第一个条件时它工作正常 - 但是当我 select 第二个条件时它在控制台中给出错误。

这是我的代码：

$(function() {

  $('#HistoryStartDate').datetimepicker({
    format: 'DD/MM/YYYY HH:mm',
    allowInputToggle: true,
    useCurrent: true
  }).on('dp.change', function(e) {
    $('#HistoryEndDate').data('DateTimePicker').minDate(e.date);
    var m = moment(new Date(e.date));
    m.add(6, 'days');
    $('#HistoryEndDate').data('DateTimePicker').maxDate(m);
  });

  $('#HistoryEndDate').datetimepicker({
    format: 'DD/MM/YYYY HH:mm',
    allowInputToggle: true,
    useCurrent: true
  });


});

这是 JSFiddle：https://jsfiddle.net/xsmsym3m/

编辑：

我找到了一个似乎不是好的解决方案的解决方法，因为它在某些情况下会失败，但我将其张贴在这里 (https://jsfiddle.net/v18gfo4s/):

$(function() {

  $('#HistoryStartDate').datetimepicker({
    format: 'DD/MM/YYYY HH:mm',
    allowInputToggle: true,
    useCurrent: true
  }).on('dp.change', function(e) {

   // Adding two years so I can set the Min Date
    var tt = moment(new Date(e.date));
    tt.add(2, 'years');
    $('#HistoryEndDate').data('DateTimePicker').maxDate(tt);

      // Set the Min date
    $('#HistoryEndDate').data('DateTimePicker').minDate(e.date);

    //Set the Max Date
    var m = moment(new Date(e.date));
    m.add(5, 'days');
    m.add(23, 'hours');
    m.add(59, 'minutes');
    m.add(59, 'seconds');
    $('#HistoryEndDate').data('DateTimePicker').maxDate(m);

      // Set End Date
    var temp = moment(new Date(e.date));
    temp.add(23, 'hours');
    temp.add(59, 'minutes');
    temp.add(59, 'seconds');

    $('#HistoryEndDate').data('DateTimePicker').date(temp);
  });

  $('#HistoryEndDate').datetimepicker({
    format: 'DD/MM/YYYY HH:mm',
    allowInputToggle: true,
    useCurrent: false
  });


});

Answer 1

您可以尝试在更新第二个选择器之前检查新的 minDate 值。

$(function() {

    $('#HistoryStartDate').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
        allowInputToggle: true,
        useCurrent: true
    }).on('dp.change', function(e) {
      var minNew = e.date;
      var maxNew = e.date.clone().add(6, 'days');
      var pickEnd = $('#HistoryEndDate');
      var minOld = pickEnd.data('DateTimePicker').minDate();
      var maxOld = pickEnd.data('DateTimePicker').maxDate();
    
      if( minOld && minOld.isAfter( maxNew )){
          pickEnd.data('DateTimePicker').minDate(minNew);
          pickEnd.data('DateTimePicker').maxDate(maxNew);
      } else {
          pickEnd.data('DateTimePicker').maxDate(maxNew);
          pickEnd.data('DateTimePicker').minDate(minNew);
      }
    });

    $('#HistoryEndDate').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
        allowInputToggle: true,
        useCurrent: true
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<div class="form-horizontal">
  <div class="col-md-4">
    <div class="form-group">
      Start Date
      <div class="col-md-9">
        <div class='input-group date' id="HistoryStartDate">
          <input type='text' class="form-control" name="HistoryStartDate" value="05/03/2016 00:00" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      End Date
      <div class="col-md-9">
        <div class='input-group date' id="HistoryEndDate">
          <input type='text' class="form-control" name="HistoryEndDate" value="05/03/2016 23:59" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Eonasdan Bootstrap 链接的日期时间选择器未按预期工作

Eonasdan Bootstrap Linked DateTime Pickers not working as expected

jquery

twitter-bootstrap

eonasdan-datetimepicker