如何在更改时为引导日期时间选择器设置 minDate 和 maxDate

How to set minDate and maxDate for bootstrap datetimepicker on change

本文关键字：选择器 时间 日期 设置 minDate maxDate      更新时间：2023-09-26

我想使用bootstrap datetimepicker询问用户一个日期范围。有一个字段表示开始日期，另一个字段表示结束日期，它们初始化为当前日期的前一天。更改开始日期时，我想将结束日期的最小日期设置为开始日期的值;在更改为结束日期时，我想将开始日期的最大日期设置为结束日期的值。但我无法让它工作。

这是JS代码：

var start = $('.start');
var end = $('.end');
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate() - 1;
var year = d.getFullYear();
start.datetimepicker(
    {
        useCurrent: false,
        defaultDate: month + '-' + day + '-' + year + ' ' + '12:00AM',
        autoClose: true
     })
 .on('change', function (selected) {
    end.minDate(selected.?????????); // What should replace the question marks?
 });
end.datetimepicker(
    {
        useCurrent: false,
        defaultDate: month + '-' + day + '-' + year + ' ' + '11:59PM',
        autoClose: true
     })
 .on('change', function (selected) {
    start.maxDate(selected.???????); // What should replace the question marks?
 });

和 HTML：

<div class="col-sm-3">
    <div class="form-group">
        <h4>Start Date</h4>
        <div class="input-group date">
            <input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="startDate" id="Calendar1" class="start form-control" placeholder="Choose a date" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div class="col-sm-3">
    <div class="form-group">
        <h4>End Date</h4>
        <div class="input-group date">
            <input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="endDate" id="Calendar2" class="end form-control" placeholder="choose a date" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

我在datepicker上找到了有关类似操作的票证，但这与datetimepicker不同，因此除非您找到类似的问题，否则请不要标记为重复datetimepicker。

根据 Bootstrap 日期时间选取器文档中的链接选取器示例，这应该可以工作。

开始：

 .on('dp.change', function (selected) {
    end.data("DateTimePicker").minDate(selected.date);
 });

结束：

 .on('dp.change', function (selected) {
    start.data("DateTimePicker").maxDate(selected.date);
 });

注意：

在旧版本的 Bootstrap 日期时间选取器（低于 v4）上，请使用 .setMinDate 和 .setMaxDate

  1. 开始日期

    .on('dp.change', function (selected) {
    end.data("DateTimePicker").minDate(selected.date);
 });

  2. 结束日期 

    .on('dp.change', function (selected) {
    start.data("DateTimePicker").maxDate(selected.date);
 });

套餐升级 ： 日期时间选择器包已升级到最新版本，我们可以使用 'maxDate（）' 代替 'setMaxDate（）' 和 'minDate（）' 代替 'setMinDate（）'，因为最近的选项在提供 maxDate/minDate 选项时考虑了以小时和分钟为单位的偶数时间。

尝试使用：

$('.datepickerProjectDate').data("DateTimePicker").minDate('2018-09-15');
相关文章：