Question

我的情况是用户只能选择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
  });


});

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: