Framework7范围日历最后日期滚动异常问题

嘿，我看你遇到了Framework7范围日历的一个棘手问题：当当前月是月底（比如2018-05-31），minDate设为昨日（此时今日是可选状态），切换到下月后就再也切不回上月了对吧？

问题根源 #

这个问题出在日历的默认月份切换逻辑上：当你尝试返回上月时，组件会自动检查该月是否存在符合minDate/maxDate的可选日期。但这里有个判断盲区——它可能只检查月份的起始日期是否符合条件，而忽略了月底的那一天（也就是你的今日），误判该月没有可选日期，从而阻止了月份切换。

修复后的代码 #

下面是调整后的代码，我在关键位置加了手动校验逻辑，确保只要目标月份有可选日期，就允许切换回去：

// 先正确生成昨日日期（避免格式或对象错误）
const today = new Date();
const yd = new Date(today);
yd.setDate(today.getDate() - 1);

calendarRange = botapp.calendar.create({
    inputEl: "#hdnDepDatesBus",
    containerEl: '#divDepDatesBus',
    dateFormat: 'yyyy-mm-dd',
    minDate: yd, // 昨日日期，保留今日可选
    rangePicker: true,
    direction: 'vertical',
    value: [arrdDateBus],
    renderToolbar: function () {
        return '<div class="toolbar calendar-custom-toolbar no-shadow divCalanderMonth"><div class="toolbar-inner"><div class="left"></div><div class="center"></div><div class="right"></div></div></div>';
    },
    on: {
        init: function (c) {
            jq('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ' ' + c.currentYear);
        },
        monthYearChangeStart: function (c) {
            // 关键：手动校验目标月份是否存在可选日期
            const targetLastDay = new Date(c.currentYear, c.currentMonth + 1, 0);
            // 判断目标月份的最后一天是否 >= minDate（只要有一天符合就允许切换）
            const hasValidDates = targetLastDay >= c.minDate;
            
            if (hasValidDates) {
                jq('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ' ' + c.currentYear);
            } else {
                // 如果确实没有可选日期，才阻止切换
                return false;
            }
        },
        change: function (c) {
            jq('.calendar-custom-toolbar .center').text(monthNames[c.value[0].getMonth()] + ' ' + c.value[0].getFullYear());
            
            if (c.value.length === 1) {
                const selectedMonth = c.value[0].getMonth();
                const currentMonth = c.currentMonth;
                
                if (selectedMonth > currentMonth) {
                    calendarRange.nextMonth();
                } else if (selectedMonth < currentMonth) {
                    // 切换回上月前，先确认目标月份有可选日期
                    const targetLastDay = new Date(c.currentYear, selectedMonth + 1, 0);
                    if (targetLastDay >= c.minDate) {
                        calendarRange.prevMonth();
                    }
                }
            }
        }
    }
});

核心修改点 #

• monthYearChangeStart事件校验：不再依赖组件的自动判断，手动检查目标月份的最后一天是否满足minDate条件，确保像5月31日这样的日期被识别为有效日期，允许切换回该月。
• change事件逻辑优化：在触发prevMonth()前增加校验，避免组件误判阻止切换。
• 日期对象标准化：补充了昨日日期的正确生成方式，避免因日期对象格式问题导致的校验错误。

这个调整应该能解决你切换月份后无法返回的问题，你可以直接替换原代码测试看看～

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