twitter-bootstrap - 如何在一个月内限制范围日期时间选择器？

Question

开发人员关于范围的示例。

例如：

如果开始日期为 07/01/2016，则结束日期不得超过 08.01.2016。

而当您更改结束日期时，也会更改开始日期的限制也为一个月。

如果我删除其中一个字段，例如结束字段，则开始日期字段将没有限制。

Answer 1

从您链接的示例开始，您可以添加几行代码来获得所需的内容：

$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
  useCurrent: false //Important! See issue #1075
});

$("#datetimepicker6").on("dp.change", function (e) {
  $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
  var limit = e.date;
  if( e.date ){
    limit = e.date.add(1, 'month');
  }
  $('#datetimepicker7').data("DateTimePicker").maxDate(limit);
});

$("#datetimepicker7").on("dp.change", function (e) {
  $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
  var limit = e.date;
  if( e.date ){
    limit = e.date.subtract(1, 'month');
  }
  $('#datetimepicker6').data("DateTimePicker").minDate(limit);
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
                <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-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

您可以使用 moment 来计算新的日期限制（请参阅add和substract）。正如文档所说，dp.change事件将新日期作为参数获取false，如果您重置日期输入字段，您将获得。您将重置minDate并maxDatefalse用作参数。