flatpickr icon indicating copy to clipboard operation
flatpickr copied to clipboard

Disable auto adjust date on manual input

Open lucianobosco opened this issue 3 years ago • 5 comments

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

lucianobosco avatar Apr 12 '21 23:04 lucianobosco

+1

thekikao avatar Aug 26 '21 12:08 thekikao

FYI: I have figured out a little workaround to prevent the internal auto-correction. Maybe this is helpful for somebody.

thekikao avatar Aug 27 '21 15:08 thekikao

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.

ARehmanMahi avatar Sep 07 '23 14:09 ARehmanMahi

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

artur79 avatar Sep 07 '23 14:09 artur79

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();
        }
      }
    });
  });

ARehmanMahi avatar Sep 07 '23 14:09 ARehmanMahi