如何为react-modern-calendar-datepicker动态生成禁用早于选中日的disabledDays数组

方案1：使用内置函数校验（推荐） #

react-modern-calendar-datepicker 的 disabledDays 属性支持直接传入校验函数，无需手动生成所有禁用日期对象，可自动处理跨月、跨年的日期判断，实现逻辑如下：

替换你之前的 disabledDays 定义即可：

const disabledDays = (day) => {
  // 将日期转为 YYYYMMDD 格式的数字方便直接比较大小
  const currentDayValue = day.year * 10000 + day.month * 100 + day.day;
  const selectedDayValue = selectedDay.year * 10000 + selectedDay.month * 100 + selectedDay.day;
  // 小于选中日的日期全部返回 true（即禁用）
  return currentDayValue < selectedDayValue;
};

组件传入逻辑无需修改，还是直接绑定 disabledDays={disabledDays} 即可，完全不需要手动处理日期递减、跨月、跨年的边界逻辑。

方案2：动态生成禁用日期数组（适合需要枚举所有禁用日期的场景） #

如果你确实需要生成完整的禁用日期对象数组，可以借助原生 JS 的 Date 对象自动处理日期计算的特性，不需要自己手写月份天数、跨年递减逻辑：

const generateDisabledDaysBefore = (selectedDay) => {
  const disabledDaysList = [];
  // 转换为原生 Date 对象，注意原生 Date 月份从 0 开始计数，所以要减1
  const selectedDate = new Date(selectedDay.year, selectedDay.month - 1, selectedDay.day);
  // 自定义需要禁用的最早日期，这里设置为10年前即可覆盖绝大多数使用场景
  const startDate = new Date(selectedDay.year - 10, 0, 1);

  // 遍历生成从起始日期到选中日前一天的所有禁用日期对象
  for (let tempDate = new Date(startDate); tempDate < selectedDate; tempDate.setDate(tempDate.getDate() + 1)) {
    disabledDaysList.push({
      year: tempDate.getFullYear(),
      month: tempDate.getMonth() + 1, // 转换回组件要求的1-12月格式
      day: tempDate.getDate()
    });
  }
  return disabledDaysList;
};

// 调用方法生成禁用日期数组
const disabledDays = generateDisabledDaysBefore(selectedDay);

原生 Date 的 setDate 方法会自动处理跨月、跨年的日期计算，比如1月1日减1天会自动适配为上一年12月31日，无需手动处理边界情况。

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