I am trying to use the flatpickr plugin to create a range like pickers accross two different inputs. One input would be for the From and the other one for To.
I tried the following but the minDate and maxDate are not getting set as expected
document.addEventListener('DOMContentLoaded', function () {
let dateTimeFrom = document.getElementById('From');
let dateTimeTo = document.getElementById('To');
let dateTimeFromPicker = flatpickr(dateTimeFrom, {
enableTime: true,
dateFormat: 'n/j/Y h:i K',
onChange: function (selectedDates, dateStr, instance) {
dateTimeTo.set('minDate', selectedDates[0]);
}
});
let dateTimeToPicker = flatpickr(dateTimeTo, {
enableTime: true,
dateFormat: 'n/j/Y h:i K',
onChange: function (selectedDates, dateStr, instance) {
dateTimeFrom.set('maxDate', selectedDates[0]);
}
});
});
How can I correctly set the range across two inputs?
I was able to get it to work using the following snippet
document.addEventListener('DOMContentLoaded', function () {
let dateTimeFrom = document.getElementById('From');
let dateTimeTo = document.getElementById('To');
let dateTimeToPicker = null;
let dateTimeFromPicker = flatpickr(dateTimeFrom, {
enableTime: true,
dateFormat: 'n/j/Y h:i K',
onChange: function (selectedDates, dateStr, instance) {
dateTimeToPicker.set('minDate', selectedDates[0]);
}
});
dateTimeToPicker = flatpickr(dateTimeTo, {
enableTime: true,
dateFormat: 'n/j/Y h:i K',
onChange: function (selectedDates, dateStr, instance) {
dateTimeFromPicker.set('maxDate', selectedDates[0]);
}
});
});