flatpickr
flatpickr copied to clipboard
Disable auto adjust date on manual input
I'm facing the same issue as this thread which has no solution yet: https://github.com/flatpickr/flatpickr/issues/1562#issue-377235094
Is there a way to disable "auto-correcting" on manual input if the date entered isn't valid?
Having the date 11/01/1993
and manually changing it to 61/01/1993
results in 02/01/1993
.
The main issue with this is that if the user mistypes the date, the input auto adjust it therefore date becomes valid and the user may be not noticed at all
Thanks in advance
+1
FYI: I have figured out a little workaround to prevent the internal auto-correction. Maybe this is helpful for somebody.
Same, would be good to hear something from author, been many years now. The pull request also doesn't have any engagement. Really liked this plugin after so many others. Hope this project is not dying.
I'd like to know too if project gonna be still maintained, I'v switched some projects to flatpickr cuz it's imho much better than select2 but support is important. Maybe donating gonna help :) https://ko-fi.com/gregoryp I'v already bought one coffee
I'm willing to donate extra if this gets built-in support and gets fixed.
The workaround I use is
let flatpickrs = window.flatpickr('.flatpickr', {
allowInput: true,
altInput: true,
altFormat: 'd-m-Y',
dateFormat: 'Y-m-d',
wrap: true,
clickOpens: false,
onKeyDown: (selectedDates, dateStr, instance, event) => {
if (event.keyCode !== 8) {
let ele = document.activeElement;
let val = ele.value;
if (val.length === 2 || val.length === 5) {
val += '-';
}
ele.value = val;
ele.dispatchEvent(new Event('input'));
}
},
});
if (!Array.isArray(flatpickrs)) {
flatpickrs = [flatpickrs];
}
// Clear input if the date is invalid
flatpickrs.forEach(picker => {
picker._input.addEventListener('keyup', event => {
if (event.target.value.length >= 10) {
let dateInput = event.target.value; // DD-MM-YYYY format
let dateArray = dateInput.split('-');
let dateStr = `${dateArray[2]}/${dateArray[1]}/${dateArray[0]}`;
if (Number.isNaN(new Date(dateStr).valueOf())) {
picker.clear();
}
}
});
});