Search code examples
javascriptjqueryflatpickr

How to use enable and disable properties together in flatpickr.js?


I am unable to use enable and disable properties together in flatpickr.js. Actually enable property is returning a range of dates that should be enabled but I want to disable specific days let's say weekends among those enabled days range.

datePickerInput.flatpickr({
                    clickOpens: false,
                    disableMobile: 'true', // Do not render mobile version UI
                    closeOnSelect: false,
                    defaultDate: null,
                    enable: [getEnableDays()],
                    disable: [
                        function (date) {
                            return (date.getDay() === 0 || date.getDay() === 6);
                        }
                    ],
                    locale: {
                        "firstDayOfWeek": 1 
                    }
                });
getEnableDays: function () {
        var me = this;
        var maxDate = '2090-12-25T16:16:22.585Z';
        var minDate = '1900-12-24T16:16:22.585Z';
        var fromDate = minDate;
        var toDate = maxDate;
        if (me.disableDays) {
            fromDate = me.isPrevDaysDisable ? me.calculatedDate.toISOString().slice(0, 10) : 'today';
            toDate = !me.isPrevDaysDisable ? me.calculatedDate.toISOString().slice(0, 10) : 'today';
        }
        return {
            from: fromDate,
            to: toDate,
        };
    },

Solution

  • You can't use disable along with enable but here's how you can achieve disable weekends functionality but using onDayCreate.

    onDayCreate: function (dObj, dStr, fp, dayElem) {
                            if (dayElem.dateObj.getDay() === 0 || dayElem.dateObj.getDay() === 6) {
                                dayElem.className += " flatpickr-disabled nextMonthDayflatpickr-disabled";
                            }
                        },