typescript antdesgin的DatePicker选开始时间与结束时间相差一年

在 TypeScript 中，如果你正在使用 Ant Design 的 DatePicker 组件，并想要设置一个允许用户选择开始时间和结束时间，它们之间最多相差一年的范围，你可以通过编写自定义的日期规则函数（date rules）来实现。Ant Design 提供了 `RangePicker` 组件，它允许开发者自定义验证日期的函数。

首先，你需要安装 Ant Design 和 TypeScript 相关依赖：

npm install @ant-design/components @types/react @types/react-dom

然后，在组件内部，你可以创建一个名为 `maxDateDifferenceOneYear` 的日期规则函数：

import { RangePicker } from '@ant-design/components';
import moment from 'moment'; // 导入用于处理日期的库

const maxDateDifferenceOneYear = (currentValue: any[], dates: any[]): boolean => {
  const start = moment(currentValue[0]);
  const end = moment(currentValue[1]);

  if (!start || !end) return true; // 如果一个值为空，则视为有效

  const oneYearLater = moment(end).add(1, 'year');
  return end.isBefore(oneYearLater);
};

// 使用自定义规则
<RangePicker
  value={[]}
  showTime={{ format: 'YYYY-MM-DD HH:mm:ss' }}
  onChange={(value) => console.log(value)}
  onOk={(values) => console.log(values)}
  validateFields={[{ name: 'dates', rules: [maxDateDifferenceOneYear] }]}
/>

这个规则会在用户尝试选择结束日期超过当前开始日期加一年时显示错误提示。记得将 `validateFields` 属性添加到 `<RangePicker>` 元素上，以便应用此限制。