jQuery UI Datepicker区间设置MM yy格式实现月份区间选择器相关问题

1 区间校验失效问题修复 #

失效原因 #

• 仅配置了起始日期的关闭回调设置结束日期的最小可选值，未配置结束日期的关闭回调限制起始日期的最大可选值
• 手动拆分日期字符串、自行维护月份映射的实现容错率低，容易出现日期解析错误导致校验规则不生效
• 缺少年月选择后的自动赋值逻辑，未选具体日期时会出现值为空的情况，导致校验失效

修复代码 #

首先新增CSS样式，解决隐藏日期选择面板的需求：

/* 隐藏日期选择表格，仅保留年月选择器 */
.ui-datepicker-calendar {
    display: none !important;
}

你原有HTML结构无需修改，替换JS部分代码如下即可：

$(document).ready(function () {
    const dateFormat = 'MM yy';
    // 初始化月份选择器
    $('.ui-monthpicker').datepicker({
        changeMonth: true,
        changeYear: true,
        maxDate: "+0D",
        dateFormat: dateFormat,
        // 选完年月后直接赋值并关闭面板，无需点击具体日期
        onChangeMonthYear: function(year, month, inst) {
            const selectedDate = new Date(year, month - 1, 1);
            $(this).val($.datepicker.formatDate(dateFormat, selectedDate));
            $(this).datepicker('hide');
            // 触发变更事件更新关联选择器的校验规则
            $(this).trigger('change');
        }
    });

    // 起始日期变更时更新结束日期的最小可选值
    $('#fromDate').on('change', function () {
        const curDate = getParsedDate(this);
        if (curDate) {
            // 起始日期取当月1号
            const minDate = new Date(curDate.getFullYear(), curDate.getMonth(), 1);
            $('#toDate').datepicker("option", "minDate", minDate);
        }
    });

    // 结束日期变更时更新起始日期的最大可选值
    $('#toDate').on('change', function () {
        const curDate = getParsedDate(this);
        if (curDate) {
            // 结束日期取当月最后一天，避免同月份选择时的边界问题
            const maxDate = new Date(curDate.getFullYear(), curDate.getMonth() + 1, 0);
            $('#fromDate').datepicker("option", "maxDate", maxDate);
        }
    });

    // 通用日期解析方法，用官方API避免自行处理格式问题
    function getParsedDate(element) {
        let date;
        try {
            date = $.datepicker.parseDate(dateFormat, element.value);
        } catch (error) {
            date = null;
        }
        return date;
    }
});

2 功能验证说明 #

修复后支持：

• 输入框仅展示MM yy格式的月份年份
• 结束日期可选范围不早于起始日期，起始日期可选范围不晚于结束日期
• 选择面板仅显示年月下拉框，无具体日期选择区域，完全符合月份区间选择的需求

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