flatpickr
allowInput user input update calendar
When allowInput: true and you change the date by typing another date and open the calendar the picker should be updated.
Environment
- flatpickr version used: 4.4.6
- Browser name and version: 66.0.3359.139
- OS and version: macOS 10.12.6
+1 This is quite annoying for the timepicker, too. Can't use the allowInput wihtout a fix. Definitely needed. No events fired aswell.
it only works if you press enter https://github.com/flatpickr/flatpickr/blob/7012a3b025c6aea05e955004082d160ea7f67535/src/index.ts#L1459
I can confirm that it works when one uses the enter key.
I think this should also allow for tabbing (tab / shift + tab), I know alot of people who do that for data entry.
Added this onClose event on my Flat Picker and it works perfect when the input loses focus.
`onClose: (selectedDates, dateStr, fp: any) => {
this.YourFlatPicker.setDate(fp._input.value);
}`
Based on the code of @LupuCristian and some other code I found here somewhere I changed my code to the following, as @LupuCristian's code would just work, when the picker is actually open. But this would not work, if you allow input but clickOpens: false (because you open the picker with a button click outside (wrap: true).
So, this is my code:
var datePicker = $($pickerInput).flatpickr(pickerOptions);
datePicker._input.addEventListener('blur', function (event) {
datePicker.setDate(datePicker._input.value);
}, true);
But still, this isn't perfect. I would like to have the behaviour like jQueryUI timepicker, which alters the datepicker with every keystroke.
Possible solution to alter the datepicker on every keystroke with a valid input format:
const altFormat = 'd.m.Y'
const datePicker = flatpickr("#myPicker", {
dateFormat: 'Y-m-d',
altInput: true,
altFormat,
allowInput: true
})
datePicker._input.addEventListener('input', (event) => {
const value = datePicker._input.value
const parsedDate = datePicker.parseDate(value, altFormat)
const formattedDate = datePicker.formatDate(parsedDate, altFormat)
if(value === formattedDate) datePicker.setDate(value, true, altFormat)
}, true)
We can use this to trigger the change to the flatpickr input. Please note that this is tailored for flatpickr input with altInput: true. You might have to modify it a little bit if altInput: false.
// Anytime the input is lost focus
$('.flatpickr-input').on('blur', function (event) {
var value = $(event.currentTarget).val();
var $this = $(event.currentTarget).siblings('.flatpickr-input');
var instance = $this[0]._flatpickr;
if (instance && value) {
// We use current format of the input
var altFormat = instance.config.altFormat;
var parsedDate = instance.parseDate(value, altFormat);
var formattedDate = instance.formatDate(parsedDate, altFormat);
// Value is valid, set the value to flatpickr instance
if (value === formattedDate) {
$(event.currentTarget).removeClass('input-validation-error');
$this.val(instance.formatDate(parsedDate, altFormat));
instance.setDate(value, true, altFormat);
}
// If the value is different from formatted date then it is invalid value
// then we will add input-validation-error class and focus back to the input
else {
$(event.currentTarget).addClass('input-validation-error').focus();
}
}
});
For anyone tracking this older issue, I believe this issue was fixed by https://github.com/flatpickr/flatpickr/pull/2130 in v4.6.5. The workarounds no longer seem necessary on newer versions.
