Question

开发人员在range上的示例。

例如：

如果开始日期是2016年1月7日，则结束日期不得超过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>

您可以使用片刻计算新的日期限制（请参阅add和substract）。当doc says，dp.change事件获取新日期作为参数时，如果重置日期输入字段，则会获得false。您将使用false作为参数重置minDate and maxDate。

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

1 个答案: