Javascript 如何在更改时为 bootstrap datetimepicker 设置 minDate 和 maxDate

How to set minDate and maxDate for bootstrap datetimepicker on change

提问by alamoot

I want to ask users for a date range using bootstrap datetimepicker. There is a field for the start date and another one for the end date, and they're initialized to the day before current day. On change to the start date, I want to set the minDate of end date to the value of start date; and on change to end date I want to set the max date of start date to the value of end date. But I cannot get this working.

我想使用 bootstrap datetimepicker 向用户询问日期范围。有一个用于开始日期和另一个用于结束日期的字段，它们被初始化为当天的前一天。在更改开始日期时，我想将结束日期的 minDate 设置为开始日期的值；在更改为结束日期时，我想将开始日期的最大日期设置为结束日期的值。但我不能让它工作。

Here is the JS code:

这是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?
 });

and the HTML:

和 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>

I've found tickets about similar operation on datepicker, but that is done differently from datetimepickerso please don't mark duplicate unless you find similar question for datetimepicker.

我在 上找到了有关类似操作的票证datepicker，但这样做的方式datetimepicker与datetimepicker.

回答by Raghd Hamzeh

Based on the Linked Pickers examplein the Bootstrap datetimepicker documentation, this should work.

基于该链接的拾荒者例子中引导的DateTimePicker文档，这应该工作。

Start:

开始：

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

End:

结尾：

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

Note:

笔记：

On older versions of Bootstrap datetimepicker (less than v4), use .setMinDateand .setMaxDate

在旧版本的 Bootstrap datetimepicker（小于 v4）上，使用.setMinDate和.setMaxDate

回答by Sai Ram

1. Start Date

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

2. End Date

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

1. 开始日期

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

2. 结束日期

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

Package Upgrade: The date timepicker package has been upgraded to latest version where we can use 'maxDate()' in place of 'setMaxDate()' and 'minDate()' inplace of 'setMinDate()' as the recent options consider even time in hrs and mins while providing maxDate/minDate option.

包升级：日期时间选择器包已升级到最新版本，我们可以使用“maxDate()”代替“setMaxDate()”和“minDate()”代替“setMinDate()”，因为最近的选项甚至考虑时间以小时和分钟为单位，同时提供 maxDate/minDate 选项。

回答by bozydarlelutko

Try to use:

尝试使用：

$('.datepickerProjectDate').data("DateTimePicker").minDate('2018-09-15');