Air date picker当前月份禁用日期样式不生效问题求助

问题根因 #

你同时触发了Air Date Picker的两次初始化：

• 你给div加了data-datepicker="true"属性，插件会自动扫描这个属性完成初始化，此时你写的onRenderCell逻辑还未绑定，当前月份第一次渲染用的是默认逻辑
• 之后你手动调用$('#disabled-days').datepicker()执行第二次初始化，新的onRenderCell仅在切换月份的时候生效，首次渲染的当前月份不会重新触发渲染，就出现了部分禁用日期样式失效的问题

解决步骤 #

1. 移除div标签上的data-datepicker="true"属性，避免自动初始化，统一走JS手动初始化逻辑
2. 可以额外在onRenderCell的返回值里加自定义禁用类，强制样式优先级，避免默认样式覆盖
3. 优化日期格式化逻辑，减少出错概率

修正后代码 #

HTML部分

<div id="disabled-days" class="datepicker-style-01" data-range="true" data-multiple-dates-separator=" - " data-picker-option='{"inline":true,"language":"my-lang"}' data-future-only="true"></div>

JS部分

var enabledDays = ['2021-10-24','2021-10-27','2021-10-30','2021-11-25','2021-11-28'];

$('#disabled-days').datepicker({
    dateFormat: 'yyyy/mm/dd',
    onRenderCell: function(date, cellType) {
        if (cellType == 'day') {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const formattedDate = `${year}-${month}-${day}`;
            const isDisabled = !enabledDays.includes(formattedDate);
            return {
                disabled: isDisabled,
                cssClass: isDisabled ? 'custom-disabled-day' : ''
            }
        }
    }
})

可选样式补充（若仍存在样式冲突可添加）

.custom-disabled-day {
    background: #f5f5f5 !important;
    color: #ccc !important;
    pointer-events: none !important;
}

内容的提问来源于stack exchange，提问作者Sriyan Arosha