如何自定义React DatePicker年份选择器的年份文本/标签？

针对你需要将年份显示为财务年度格式的需求，以下是两种可行的实现方案：

方案1：自定义年份选项与输入框显示 #

该方案基于React DatePicker自带的扩展能力，修改年份选项和输入框的显示内容：

1. 自定义年份选择列表的文本 #

通过renderYear属性重写年份选项的渲染逻辑，将完整年份转换为短财年格式：

// 转换年份为财年格式，如2020 → 20-21
const renderYear = (year) => {
  const startSuffix = year.toString().slice(-2);
  const endSuffix = (year + 1).toString().slice(-2);
  return `${startSuffix}-${endSuffix}`;
};

2. 自定义输入框显示财年 #

默认输入框会遵循dateFormat显示完整年份，因此需要用customInput替换输入组件，显示财年格式：

const CustomFiscalInput = ({ value, onClick }) => {
  if (!value) {
    return <input onClick={onClick} placeholder="yyyy" />;
  }
  const year = value.getFullYear();
  const fiscalText = `${year.toString().slice(-2)}-${(year + 1).toString().slice(-2)}`;
  return <input onClick={onClick} value={fiscalText} readOnly />;
};

3. 修改后的DatePicker组件 #

将上述逻辑整合到你的代码中：

<DatePicker
  showIcon
  selected={selectedDate}
  onChange={handleYearChange}
  dateFormat="yyyy"
  showYearPicker
  className={classes.datepicker}
  placeholderText="yyyy"
  renderCustomHeader={renderCustomYearHeader}
  ref={calRef}
  renderYear={renderYear} // 自定义年份选项文本
  customInput={<CustomFiscalInput />} // 自定义输入框显示
/>

可选：绑定财年对应的实际日期 #

如果你的财务年度对应特定日期范围（如2020财年为2020-07-01至2021-06-30），可以在onChange中设置选中的日期为财年起始/结束日：

const handleYearChange = (date) => {
  // 设置为财年起始日（7月1日）
  const fiscalStartDate = new Date(date.getFullYear(), 6, 1);
  setSelectedDate(fiscalStartDate);
};

方案2：手动生成财务年度选项（更灵活） #

如果默认年份选择器的逻辑无法满足需求，可以手动生成财年列表，结合下拉框控制DatePicker：

// 生成最近10年的财务年度选项
const generateFiscalYears = () => {
  const currentYear = new Date().getFullYear();
  return Array.from({ length: 10 }, (_, i) => {
    const year = currentYear - i;
    return {
      label: `${year.toString().slice(-2)}-${(year + 1).toString().slice(-2)}`,
      value: new Date(year, 6, 1) // 对应财年起始日期
    };
  });
};

const fiscalYears = generateFiscalYears();

// 组件中使用下拉框控制日期选择
<select
  value={selectedDate?.toISOString()}
  onChange={(e) => setSelectedDate(new Date(e.target.value))}
>
  {fiscalYears.map(fy => (
    <option key={fy.value} value={fy.value}>{fy.label}</option>
  ))}
</select>

{/* 隐藏原生DatePicker，仅用于日历交互（可选） */}
<DatePicker
  selected={selectedDate}
  onChange={setSelectedDate}
  showYearPicker
  style={{ display: 'none' }}
/>

注意事项 #

• 确保你的react-datepicker版本在v4.0以上，renderYear属性才会生效
• 若财年起始月份不是7月，调整年份转换逻辑中的月份参数即可
• 自定义输入框建议设置为readOnly，避免用户手动输入导致格式混乱

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