Greetings developers! 🌟 Today, we embark on a journey to master the art of disabling dates in Flatpickr, the date picker library that brings both elegance and functionality to your projects.

Whether you need to restrict specific dates, block out ranges, or dynamically disable dates using a function, Flatpickr has the flexibility you crave.

Let's dive in and harness the full potential of date control with Flatpickr! 📅✨

So, let's see how to disable dates in flatpickr example, disable date in date picker, specific date disable in flatpickr, past date disable in flatpickr, and date range disable in flatpickr.

First things first, make sure Flatpickr is included in your project. You can either download it or use the CDN. For simplicity, let's go with the CDN:

<!-- Include Flatpickr CSS and JS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

 

Create an HTML input element to serve as your date picker. Give it a unique ID, such as "myDatePicker."

<!-- Your HTML input element -->
<input type="text" id="myDatePicker" placeholder="Select a date">

 

Let's start by disabling specific dates. In this example, we'll block out January 15, 2024.

// Initialize Flatpickr and disable specific date
const myDatePicker = flatpickr("#myDatePicker", {
    disable: ["2024-01-15"],
});

// Initialize Flatpickr and disable specific date
const myDatePicker = flatpickr("#myDatePicker", {
    disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ],
    dateFormat: "Y-m-d",
});

 

Now, let's disable a date range, say from January 1, 2024, to January 10, 2024.

// Initialize Flatpickr and disable date range
const myDatePicker = flatpickr("#myDatePicker", {
    disable: [
        { from: "2024-01-01", to: "2024-01-10" }
    ],
});

// Initialize Flatpickr and disable date range
const myDatePicker = flatpickr("#myDatePicker", {
    dateFormat: "Y-m-d",
    disable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ],
});

 

For more dynamic control, let's use a function to disable weekends. This example demonstrates how to disable Saturdays and Sundays.

// Initialize Flatpickr and disable dates using a function
const myDatePicker = flatpickr("#myDatePicker", {
    disable: [
        function(date) {
            // Disable weekends (Saturdays and Sundays)
            return (date.getDay() === 0 || date.getDay() === 6);
        }
    ],
});

And there you have it! You've successfully wielded the power of Flatpickr to disable specific dates, date ranges, and even utilized a function for dynamic date control.

 

---

You might also like:

• Read Also: How to set minDate and maxDate in Flatpickr
• Read Also: How To Disable Date In Bootstrap 5 Datepicker
• Read Also: How to Disable Past Dates in Bootstrap 5 Datepicker
• Read Also: Creating Vue 3 Datepicker with Tailwind CSS 3