typescript antdesgin的rangePicker组件选开始时间与结束时间相差一年详细代码

在 TypeScript 中，Ant Design 的 `RangePicker` 组件允许用户选择范围，包括日期和时间。如果你想要限制开始时间和结束时间最多相差一年，你可以自定义一下 RangePicker 的验证功能。这里是一个简化的示例代码，假设你已经在项目中安装了 Ant Design 和 TypeScript：

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment'; // 用于处理日期

interface CustomRangeProps {
  onOk: (values: Date[]) => void;
}

const CustomRangePicker: React.FC<CustomRangeProps> = ({ onOk }) => {
  const [start, setStart] = useState<Date>();
  const [end, setEnd] = useState<Date>();

  const handleMinMaxChange = (value: Date | [Date, Date]) => {
    if (!value) return;

    const newEnd = value[1];
    const oneYearDifference = moment.duration(1, 'year').asMilliseconds();

    if (newEnd && newEnd - start > oneYearDifference) {
      alert('开始时间和结束时间最多只能相差一年');
      setEnd(start);
    } else {
      setEnd(newEnd);
    }
  };

  const handleSubmit = () => {
    if (start && end && end - start <= oneYearDifference) {
      onOk([start, end]);
    }
  };

  return (
    <DatePicker.RangePicker
      showTime={{ format: 'YYYY-MM-DD HH:mm:ss' }}
      allowClear={false}
      onChange={handleMinMaxChange}
      onOk={handleSubmit}
      value={[start, end]}
    />
  );
};

export default CustomRangePicker;

在这个例子中，我们监听了 `onChange` 事件来检查新选择的结束时间是否超过了一年前的开始时间。如果超过了，就弹出警告并设置结束时间为开始时间。