如何让MUI X Date Pickers支持公元前（BCE）年份？

问题根源 #

date-fns处理公元前年份时，公元1年（CE）和公元前1年（BCE）的yyyy格式化结果均为0001，导致DatePicker年份选择器内部生成的选项key重复，触发React的重复key警告。

解决方案 #

通过自定义年份格式化逻辑，给公元前年份的key添加唯一标识，区分开同数字的公元/公元前年份。

方法1：自定义renderYear组件 #

直接在DatePicker中覆盖年份选项的key生成逻辑：

import { DatePicker, PickerDay } from '@mui/x-date-pickers';
import { format } from 'date-fns';

// 生成唯一年份key的函数
const getUniqueYearKey = (date) => {
  const year = date.getFullYear();
  return year < 0 ? `B-${Math.abs(year).toString().padStart(4, '0')}` : year.toString().padStart(4, '0');
};

// 使用DatePicker
<DatePicker
  minDate={new Date(-1, 0, 1)} // 设置公元前1年为最小日期
  renderYear={(yearDate, selectedDate, pickersDayProps) => (
    <PickerDay
      {...pickersDayProps}
      key={getUniqueYearKey(yearDate)}
    >
      {format(yearDate, yearDate.getFullYear() < 0 ? 'yyyy BCE' : 'yyyy')}
    </PickerDay>
  )}
  // 其他属性如label、value等...
/>

方法2：全局自定义date-fns本地化 #

通过修改date-fns适配器的本地化配置，全局处理年份显示和key生成：

import { LocalizationProvider } from '@mui/x-date-pickers';
import { createDateFnsAdapter } from '@mui/x-date-pickers/date-fns-adapter';
import { enUS } from 'date-fns/locale';

// 自定义本地化配置
const customLocale = {
  ...enUS,
  formatLong: {
    ...enUS.formatLong,
    year: (date) => {
      const year = date.getFullYear();
      return year < 0 ? `${Math.abs(year)} BCE` : `${year}`;
    },
  },
};

// 创建自定义适配器
const CustomDateAdapter = createDateFnsAdapter({ locale: customLocale });

// 包裹应用组件
<LocalizationProvider dateAdapter={CustomDateAdapter}>
  <DatePicker minDate={new Date(-1, 0, 1)} />
</LocalizationProvider>

说明 #

两种方法核心都是给公元前年份的标识添加区分前缀（如B-），确保公元1年和公元前1年的key分别为0001和B-0001，避免重复。同时可以优化年份显示，让用户清晰区分公元/公元前年份。

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