如何限制年份选择器仅显示距今60年前及更早年份？

核心思路 #

先计算允许选择的最大年份（当前年份减去60），生成该年份及更早的年份选项列表替换原有模拟数据；同时配合Formik表单验证，双重确保输入符合要求。

步骤1：生成合规的年份选项数组 #

编写工具函数动态生成年份范围，替代原有的selectYear模拟数据：

// 计算允许的最大年份：当前年份 - 60
const getValidYearOptions = () => {
  const currentYear = new Date().getFullYear();
  const maxAllowedYear = currentYear - 60;
  const yearOptions = [];
  
  // 生成从maxAllowedYear往前推100年的选项（可按需调整下限）
  for (let year = maxAllowedYear; year >= maxAllowedYear - 100; year--) {
    yearOptions.push({
      label: year.toString(),
      value: year.toString()
    });
  }
  return yearOptions;
};

// 在组件中调用生成合规选项
const validYearOptions = getValidYearOptions();

步骤2：替换Select组件的menuItems #

将原代码中的menuItems={selectYear}替换为生成的合规选项：

<Select
  label="Start Year"
  menuItems={validYearOptions} // 替换为合规年份数组
  name={`educations[${index}].startYear`}
  value={formik.values.educations[index].startYear}
  handleChange={formik.handleChange}
  color="secondary"
  error={formik.errors.startYear}
/>
<FormHelperText error>{formik.errors.startYear}</FormHelperText>

<Select
  label="End Year"
  menuItems={validYearOptions} // 替换为合规年份数组
  name={`educations[${index}].endYear`}
  value={formik.values.educations[index].endYear}
  handleChange={formik.handleChange}
  color="secondary"
  error={formik.errors.endYear}
/>
<FormHelperText error>{formik.errors.endYear}</FormHelperText>

步骤3：添加Formik表单验证（可选但推荐） #

防止非常规手段输入超出范围的年份，在Formik验证规则中添加年份校验：

const validationSchema = Yup.object().shape({
  educations: Yup.array().of(
    Yup.object().shape({
      startYear: Yup.string()
        .required("起始年份不能为空")
        .test(
          "max-year",
          `起始年份不能晚于${new Date().getFullYear() - 60}年`,
          (value) => {
            if (!value) return true;
            const maxYear = new Date().getFullYear() - 60;
            return parseInt(value) <= maxYear;
          }
        ),
      endYear: Yup.string()
        .required("结束年份不能为空")
        .test(
          "max-year",
          `结束年份不能晚于${new Date().getFullYear() - 60}年`,
          (value) => {
            if (!value) return true;
            const maxYear = new Date().getFullYear() - 60;
            return parseInt(value) <= maxYear;
          }
        )
    })
  )
});

补充说明 #

• 动态生成的年份数组会自动适配当前年份，无需手动更新模拟数据
• 若需调整年份下限（允许更早的年份），修改for循环的终止条件即可
• 表单验证可作为兜底，确保输入完全符合规则

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