Search code examples
javascriptflatpickr

Allow date less than minDate in flatpickr


I have the following code:

if (setToToday) {
  this.flatpickr({
      minDate: 'today',
      defaultDate: new Date( $(this).attr("date")),
  });
} else {
    flatpickr(this).setDate(new Date( $(this).attr("date") ));
}

Now what I would like to do is to show the user a date value less than today if the attr(date) is lesser today. Suppose today is 2021-03-03 and the previously selected value was 2021-02-02, I would like to allow the user to select that previous date or any date from today. Nothing in between. How can I do that in flatpickr?


Solution

  • If you’d like to make certain dates unavailable for selection, there are multiple methods of doing so.

    1. Disabling specific date
    2. Disabling a date range
    3. Disabling dates using a function

    Disabling specific dates

    {
        disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ],
        dateFormat: "Y-m-d",
    }
    

    Disabling range(s) of dates:

    {
        dateFormat: "Y-m-d",
        disable: [
            {
                from: "2025-04-01",
                to: "2025-05-01"
            },
            {
                from: "2025-09-01",
                to: "2025-12-01"
            }
        ]
    }
    

    Disabling dates by a function:

    {
        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 6);
    
            }
        ],
        "locale": {
            "firstDayOfWeek": 1 // start week on Monday
        }
    }
    

    Refer to the official documentation for more