如何基于输入日期设置日期选择器的禁用日期范围？

问题说明 #

需要实现的效果：仅启用大于status_date加5天且小于等于status_date所在当月最后一天的日期，示例如下：

• 当status_date为26/07/2023时，启用01/08/2023至月末（26+5=31，7月最后一天是31日，因此从下月初开始）
• 当status_date为17/07/2023时，启用22/07/2023至月末

原代码仅部分场景生效，核心问题在于日期禁用逻辑搞反、月份索引处理错误。

错误分析 #

1. 禁用逻辑颠倒：disableUntil是禁用目标日期之前（含）的日期，disableSince是禁用目标日期之后（含）的日期，原代码两者的配置逻辑完全搞反
2. 月份索引错误：Moment.js的月份是0-based（0代表1月），原代码直接给月份加2/1会导致月份偏移错误
3. maxDate定义错误：原代码给当月最后一天加1天，导致需要启用的月末日期被错误禁用

修复后的代码 #

if (v.name == 'WISH_DATE') {
    const statusDate = moment(this.validAddress.duedate, "DD/MM/YYYY");
    const minDate = moment(statusDate).add(5, 'days');
    // 直接取status_date所在当月的最后一天
    const maxDate = moment(statusDate).endOf('month');

    v.setup = {
        // 从maxDate的下一天开始禁用，确保maxDate当天可选择
        disableSince: {
            year: maxDate.year(),
            month: maxDate.month() + 1, // 转成1-based月份（匹配日期选择器的月份格式）
            day: maxDate.date() + 1
        },
        // 禁用minDate及之前的日期，确保仅启用minDate之后的日期
        disableUntil: {
            year: minDate.year(),
            month: minDate.month() + 1, // 转成1-based月份
            day: minDate.date()
        }
    };
}

修复说明 #

• 逻辑修正：
  • disableUntil设置为minDate，过滤掉所有小于等于minDate的日期，只保留之后的日期
  • disableSince设置为maxDate+1天，过滤掉所有大于maxDate的日期，只保留到月末的日期
• 月份处理：将Moment的0-based月份转为1-based，匹配多数日期选择器的月份展示逻辑
• maxDate调整：直接取当月最后一天，通过disableSince的day+1，确保月末当天处于可选择范围

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