How to set minDate and maxDate to bootstrap datetimepicker on change
I want to ask users about a date range using bootstrap datetimepicker. The start date field and another for the end date, and they are initialized to the day before the current day. When changing the start date, I want to set the minDate of the end date to the start date value; and when the end date changes, I want to set the max start date of the date to the end date value. But I cannot get this to work.
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 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 found tickets for a similar operation on datepicker
, but it is done differently than datetimepicker
, so please do not mark a duplicate unless you find a similar question for datetimepicker
.
source to share
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);
});
The end:
.on('dp.change', function (selected) {
start.data("DateTimePicker").maxDate(selected.date);
});
Note:
In older versions of Bootstrap datetimepicker (less than v4) use .setMinDate
and.setMaxDate
source to share
-
start date
.on('dp.change', function (selected) { end.data("DateTimePicker").minDate(selected.date); });
-
Final date
.on('dp.change', function (selected) { start.data("DateTimePicker").maxDate(selected.date); });
Package update : The datepicker package has been updated to the latest version where we can use 'maxDate ()' instead of 'setMaxDate ()' and 'minDate ()' inplace of 'setMinDate ()' since the last parameters even take into account the time in hrs and min when provided with the maxDate / minDate option.
source to share