【问题标题】:Eonasdan Bootstrap Linked DateTime Pickers not working as expectedEonasdan Bootstrap 链接的日期时间选择器未按预期工作
【发布时间】:2016-03-07 00:26:07
【问题描述】:

我有一种情况,用户只能选择 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
  });


});

【问题讨论】:

  • 对不起,这是我的误会。但是你对not seem like a good solution 是什么意思。你想最小化代码吗?
  • @ManhLe 我的意思是这是一种解决方法 - 添加 2 年来设置最小日期不应该是一个解决方案。

标签: jquery twitter-bootstrap eonasdan-datetimepicker


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-08-29
    • 1970-01-01
    • 2014-01-05
    • 1970-01-01
    • 2011-09-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多