Flatpickr Calendar - How to Disable listed dates and weekends

Question

I am using flatpickr.js for my calendar. I want to disable some listed dates together with Saturdays and Sundays. Disabling Sat and Sun works well using the following code. However for the listed dates, only the first date is disabled. Why not the rest? What am I doing wrong?

        function rmydays(date) {
            return (date.getDay() === 0 || date.getDay() === 6);
        }

        var $rdated_data = '"10-16-2019", "10-22-2019", "10-25-2019"';  

        $("#retail-calendar").flatpickr({
                enableTime: true,
                inline: true,
                dateFormat: m-d-Y,                    
                disable: [$rdated_data, rmydays ],                  
                locale: {
                     firstDayOfWeek: 1
                    }
        });

Answer 1

It seems you are using both concrete dates and functions in "disable", can you try:

    function rmySpecificdays(date) {
        const rdatedData = ["2019-10-16", "2019-10-22", "2019-10-25"]; 
        return rdatedData.includes(date.toISOString().substring(0, 10));
    }

    function rmydays(date) {
        return (date.getDay() === 0 || date.getDay() === 6);
    }

    $("#retail-calendar").flatpickr({
            enableTime: true,
            inline: true,
            dateFormat: m-d-Y,                    
            disable: [rmydays, rmySpecificdays],                  
            locale: {
                 firstDayOfWeek: 1
                }
    });

Answer 2

The answer using the toISOString() function does not work as expected. It disables the day after the one listed in the array.

The toISOString() method returns the date in UTC, not in local time. I was able to correctly compare the dates with this custom function:

function toISODate(d) {
    const z = n => ('0' + n).slice(-2);
    return d.getFullYear() + '-' + z(d.getMonth()+1) + '-' + z(d.getDate()); 
}

I found the solution in the flatpickr issues: https://github.com/flatpickr/flatpickr/issues/2426

Answer 3

I was able to make it work using this format:

    "disable": [
        // Disable weekends
        function(date) {
            return (date.getDay() === 0 || date.getDay() === 6);

        },
        // Disable specific dates
        "2022-03-25",
        "2022-03-10",
        "2022-03-04" 
    ]

Answer 4

based on @horatiu-jeflea and @marloes provided solutions, I used below code to fix my similar issue with multiple pickers hope it might help someone.

       var disableDates =  [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 6);

            },
            function(date) {                    
                const rdatedData = ["2022-01-01","2022-04-30","2022-05-01","2022-05-02","2022-05-03","2022-05-04","2022-07-08","2022-07-09","2022-07-10","2022-07-11","2022-07-30","2022-10-08","2022-12-01","2022-12-02","2022-12-03"]; 
                return rdatedData.includes (toISODate(date)) ;
            },
        ];
        var Fp_options_cfg = {
            altInput: true,
            altFormat: "d M Y",
            dateFormat: "Y-m-d",
            onChange: [],                
            "disable": disableDates,
            "locale": {
                "firstDayOfWeek": 1 // start week on Monday
            },
           
        };
        InputLeaveFrom = flatpickr("#InputLeaveFrom", Fp_options_cfg);
        InputLeaveFrom.config.onChange.push(function(selectedDates, dateStr, instance) {
            InputLeaveTo.set('minDate', selectedDates[0]);
            InputLastWorkingDate.set('maxDate', new Date(dateStr).fp_incr(-1) );
        } );
        InputLeaveTo = flatpickr("#InputLeaveTo", Fp_options_cfg);
        InputLeaveTo.config.onChange.push(function(selectedDates, dateStr, instance) {
            InputLeaveFrom.set('maxDate', selectedDates[0]);
            InputResumptionDate.set('minDate', new Date(dateStr).fp_incr(1) );
        } );
        InputLastWorkingDate = flatpickr("#InputLastWorkingDate", Fp_options_cfg);
        InputLastWorkingDate.config.onChange.push(function(selectedDates, dateStr, instance) {
            InputLeaveFrom.set('minDate', new Date(dateStr).fp_incr(1) );
                        
        } );
        InputResumptionDate = flatpickr("#InputResumptionDate", Fp_options_cfg);
        InputResumptionDate.config.onChange.push(function(selectedDates, dateStr, instance) {
            InputLeaveTo.set('maxDate', new Date(dateStr).fp_incr(-1) );
            
        } );

        function toISODate(d) {
             const z = n => ('0' + n).slice(-2);
             return d.getFullYear() + '-' + z(d.getMonth()+1) + '-' + 
             z(d.getDate()); 
        }