基于Hackerone React Datepicker实现Decade选择及世纪头部显示求助

一、实现十年（Decade）选择 #

官方确实没有直接支持十年选择的Props，但可以通过自定义年份项渲染和过滤年份列表来实现：

1. 过滤年份列表，只保留每10年的起始年份
   用filterYearItem过滤掉非十年起始的年份，比如只保留2000、2010、2020这类年份：

const filterDecadeYears = (year) => {
  return year % 10 === 0;
};

2. 自定义十年项的显示文本
   通过renderYearItem把单个年份渲染成十年范围的格式，比如把2020渲染成"2020-2029"：

const renderDecadeItem = (year) => {
  return `${year}-${year + 9}`;
};

3. 整合到Datepicker组件
   把这两个函数传入组件，配合yearItemNumber设置足够的年份范围：

<DatePicker
  yearItemNumber={100}
  filterYearItem={filterDecadeYears}
  renderYearItem={renderDecadeItem}
  // 其他必要Props（如selected、onChange等）
/>

如果需要点击十年项后绑定业务逻辑（比如选中整个十年范围），可以在onChange中处理，或是给自定义项添加点击事件时注意用stopPropagation避免组件内部事件冲突。

二、头部显示世纪（无需硬编码） #

用renderCustomHeader自定义头部内容，通过日期计算动态获取当前显示年份对应的世纪：

1. 计算世纪的函数
   根据当前显示的年份计算对应世纪：

const getCentury = (year) => {
  return Math.floor(year / 100) + 1;
};

2. 自定义头部渲染
   在renderCustomHeader里获取当前视图的年份，计算后渲染世纪，同时保留切换控件：

const renderCustomHeader = ({ date, changeYear }) => {
  const currentYear = date.getFullYear();
  const century = getCentury(currentYear);
  
  return (
    <div className="datepicker-header">
      <span>{century}世纪</span>
      <button onClick={() => changeYear(currentYear - 100)}>上一世纪</button>
      <button onClick={() => changeYear(currentYear + 100)}>下一世纪</button>
    </div>
  );
};

3. 传入组件

<DatePicker
  renderCustomHeader={renderCustomHeader}
  // 其他必要Props
/>

这样就能动态根据当前显示年份计算并展示世纪，完全不需要硬编码。

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