Hi I'm trying to replace the datetimepicker with flatpickr but I can't handle this situation. Not wishing to use the Range plugin of flatpickr I would like to be able to change the minDate or maxDate of an instance using the onChange event. Unfortunately I found little information about this passage on the guides
flatpickr('#start_time', {
locale: 'it',
enableTime: true,
plugins: [
new confirmDate({
confirmIcon: "<i class='fa fa-check'></i>",
confirmText: '',
showAlways: true,
}),
],
showAlways: false,
theme: 'airbnb',
time_24hr: true,
altInput: true,
altFormat: 'F j, Y H:i',
dateFormat: 'Z',
weekNumbers: true,
maxDate: $('#end_time').attr('value'),
onClose: function(selectedDates, dateStr, instance) {
// Change #end_time minDate
},
});
flatpickr('#end_time', {
locale: 'it',
enableTime: true,
plugins: [
new confirmDate({
confirmIcon: "<i class='fa fa-check'></i>",
confirmText: '',
showAlways: true,
}),
],
showAlways: false,
theme: 'airbnb',
time_24hr: true,
altInput: true,
altFormat: 'F j, Y H:i',
dateFormat: 'Z',
weekNumbers: true,
minDate: $('#start_time').attr('value'),
onClose: function(selectedDates, dateStr, instance) {
// Change #start_time maxDate
},
});
I tried to play with $('#start_time')[0]._flatpickr.config._maxDate but without success
Thanks ;)
Solved in this way
let startpicker = flatpickr('#start_time', {
locale: 'it',
enableTime: true,
plugins: [
new confirmDate({
confirmIcon: "<i class='fa fa-check'></i>",
confirmText: '',
showAlways: true,
}),
],
showAlways: false,
theme: 'airbnb',
time_24hr: true,
altInput: true,
altFormat: 'F j, Y H:i',
dateFormat: 'Z',
weekNumbers: true,
maxDate: $('#end_time').attr('value'),
onClose: function(selectedDates, dateStr, instance) {
endpicker.set('minDate', dateStr);
},
});
let endpicker = flatpickr('#end_time', {
locale: 'it',
enableTime: true,
plugins: [
new confirmDate({
confirmIcon: "<i class='fa fa-check'></i>",
confirmText: '',
showAlways: true,
}),
],
showAlways: false,
theme: 'airbnb',
time_24hr: true,
altInput: true,
altFormat: 'F j, Y H:i',
dateFormat: 'Z',
weekNumbers: true,
minDate: $('#start_time').attr('value'),
onClose: function(selectedDates, dateStr, instance) {
startpicker.set('maxDate', dateStr);
},
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With