如何在一个月内限制范围 datetimepicker？

Question

range 上的开发人员示例。

例如：

如果开始日期是 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 and substract). As the doc says, dp.change event gets the new date as an argument and you'll get false if you reset the date input field. You will reset minDate and maxDate 使用 false 作为参数。

如何在一个月内限制范围 datetimepicker？

How to Restrict range datetimepicker in one month?

datetimepicker

twitter-bootstrap

momentjs

eonasdan-datetimepicker