如何在 flatpickr.js 中同时使用启用和禁用属性？答案

【问题标题】：How to use enable and disable properties together in flatpickr.js?如何在 flatpickr.js 中同时使用启用和禁用属性？
【发布时间】：2021-12-16 18:46:37
【问题描述】：

我无法在 flatpickr.js 中同时使用启用和禁用属性。实际上，启用属性返回了应启用的日期范围，但我想禁用特定日期，比如启用日期范围中的周末。

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,
        };
    },

【问题讨论】：

标签： javascript jquery flatpickr

【解决方案1】：

您不能将 disable 与 enable 一起使用，但以下是您可以通过使用 onDayCreate 来实现禁用周末功能的方法。

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

【讨论】：