Как установить minDate и maxDate для начальной загрузки datetimepicker при изменении

Question

Я хочу попросить пользователей указать диапазон дат с помощью начальной загрузки datetimepicker. Есть поле для даты начала и еще одно для даты окончания, и они инициализируются на день раньше текущего дня. При изменении даты начала я хочу установить minDate даты окончания на значение даты начала; и при изменении на дату окончания я хочу установить максимальную дату начала на значение даты окончания. Но я не могу заставить это работать.

Вот код 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,

Answer 1

На основании примера Linked Pickers в документации Bootstrap datetimepicker это должно работать.

Начните:

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

Конец:

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

Замечания:

В более старых версиях Bootstrap datetimepicker (менее v4) используйте .setMinDate а также .setMaxDate

Answer 2

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.

Answer 3

Попробуй использовать:

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