typescript antdesgin的DatePicker选时间相差一年

在TypeScript中，Ant Design库的DatePicker组件是用来选择日期的，它默认支持用户选择当前日期以及范围内的日期。如果你想要让用户可以选择相差一年的时间，通常情况下Ant Design DatePicker本身并不直接提供这样的功能，因为它设计的目的是在合理的范围内选择日期。

然而，你可以通过一些自定义的方式来实现这个需求。一种方法是扩展或修改DatePicker组件的源码，添加额外的逻辑来限制选择的日期范围。这可能涉及到创建一个新的状态变量来跟踪允许的最大和最小日期，并在组件内部处理用户输入的日期有效性。

另一个方法是结合React Hooks或者条件渲染，当用户选择完日期后，动态计算并阻止提交超出一年范围的日期。比如，你可以先获取当前日期，然后设置一个年份范围，例如`currentYear - 1`到`currentYear + 1`，只允许在这个范围内选择日期。

下面是简化的示例代码片段：

import { useState } from 'react';
import DatePicker from 'antd/lib/date-picker';

const CustomDatePicker = ({ onChange }) => {
  const [currentDate, setCurrentDate] = useState(new Date());
  const maxYear = new Date().getFullYear() + 1;
  const minYear = new Date().getFullYear() - 1;

  const onOk = (selectedDates) => {
    if (
      selectedDates.length > 0 &&
      selectedDates[0].getFullYear() < minYear ||
      selectedDates[0].getFullYear() > maxYear
    ) {
      return; // 如果超过范围，阻止默认行为
    }
    onChange(selectedDates);
  };

  return (
    <DatePicker
      value={currentDate}
      onChange={(date) => setCurrentDate(date)}
      onOk={onOk}
      showYearPanel // 显示年份面板，方便用户快速选择年份
    />
  );
};

// 使用CustomDatePicker组件
<CustomDatePicker onChange={(date) => console.log(date)} />