0

我有一种情况,用户只能选择 7 天的日期范围。

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

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

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

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

在此处输入图像描述

这是我的代码:

$(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
  });


});
4

1 回答 1

3

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>

于 2016-03-06T16:26:07.190 回答