Activity

1. sridharkalaibala commented on Sep 13, 2026

   

   sridharkalaibala

   on Sep 13, 2026

   More actions

   You can reject calendar rollover through the existing parseDate option. For an exact Y-m-d input, validate the components after constructing the date:

   <input id="date" aria-describedby="date-error">
   <span id="date-error" role="status"></span>

   const input = document.getElementById('date');
   const error = document.getElementById('date-error');
   
   flatpickr(input, {
     dateFormat: 'Y-m-d',
     allowInput: true,
     parseDate(text) {
       const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text);
       if (!match) return undefined;
       const [, year, month, day] = match.map(Number);
       const date = new Date(0);
       date.setHours(0, 0, 0, 0);
       date.setFullYear(year, month - 1, day);
       return date.getFullYear() === year &&
         date.getMonth() === month - 1 &&
         date.getDate() === day ? date : undefined;
     },
     errorHandler() {
       error.textContent = 'Enter a valid date as YYYY-MM-DD.';
     }
   });
   input.addEventListener('input', () => { error.textContent = ''; });

   I tested manual input followed by blur in Chromium with the built Flatpickr editor. Month 13, April 31, February 29 in 2025, and trailing text are rejected; February 29 in 2024 and April 30 are accepted. In this configuration rejected input clears the selection and shows the inline message; it does not restore the previous date.

   This example accepts only the displayed format above. If you use a different altFormat, the custom parser must also handle that format. Calendar validity is separate from application-specific allowed dates, which should remain configured through options such as minDate, maxDate or disable.