How to set minDate and maxDate for bootstrap datetimepicker on change

Question

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.

Here is the JS code:

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:

<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 datetimepicker so please don't mark duplicate unless you find similar question for datetimepicker.

Solution 1

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

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 .setMinDate and .setMaxDate

Solution 2

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);
    });
   

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.