Air Datepicker响应式适配求助：桌面双月/移动单月视图实现

一、实现桌面双月/移动端单月响应式切换 #

当前代码固定numberOfMonths: 2，要实现响应式需结合窗口 resize 事件动态更新配置：

1. 初始化时先根据当前屏幕宽度设置初始月份数：

const getMonthCount = () => window.innerWidth >= 768 ? 2 : 1; // 以768px为分界，可自行调整

let picker;
let pickerInitialized = false;

if (!pickerInitialized) {
    picker = new AirDatepicker('#datepicker-input', {
        inline: true,
        range: true,
        multipleDatesSeparator: ' - ',
        showOtherMonths: true,
        numberOfMonths: getMonthCount(), // 初始根据屏幕宽度设置
        locale: englishLocale,
        minDate: new Date(),
        onSelect({date, formattedDate}) {
            selectedStartDate = date[0];
            selectedEndDate = date[1];
            // 你的其他选择逻辑
        }
    });
    pickerInitialized = true;

    // 添加窗口 resize 监听，动态更新月份数
    window.addEventListener('resize', () => {
        const newMonthCount = getMonthCount();
        if (picker.options.numberOfMonths !== newMonthCount) {
            picker.update({ numberOfMonths: newMonthCount });
        }
    });
}

2. 注意：如果使用Vue/React等框架，要在组件销毁时移除resize监听，避免内存泄漏。

二、修复缺失下一月的问题 #

出现该问题通常和以下几点有关，逐一排查：

• 检查locale配置：确保englishLocale正确定义，尤其是月份相关配置无缺失。示例正确的英文locale配置：

const englishLocale = {
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    today: 'Today',
    clear: 'Clear',
    dateFormat: 'MM/dd/yyyy',
    timeFormat: 'hh:mm aa',
    firstDay: 0
};

• 调整startDate配置：如果当前日期接近月末，minDate可能导致默认显示的月份组异常，可手动指定起始月份为当前月：

// 在初始化配置中添加
startDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),

• 强制导航到正确月份：初始化后调用navigateTo方法确保显示当前月和下一月：

// 初始化picker后添加
picker.navigateTo(new Date());

三、额外注意事项 #

• 确保Air Datepicker版本为最新，旧版本可能存在响应式或月份显示的bug。
• 检查是否有自定义CSS覆盖了日期选择器的布局，导致月份被隐藏。

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