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

在 TypeScript 中，Ant Design 的 DatePicker 组件允许用户选择日期范围，包括开始时间和结束时间。如果需要限制开始时间和结束时间最多相差一年，你可以通过监听日期改变事件并添加一些条件判断来实现。以下是一个简化的例子：

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment'; // 使用 moment.js 进行日期处理

const App: React.FC = () => {
  const [startDate, setStartDate] = useState(moment());
  const [endDate, setEndDate] = useState(startDate.clone().add(1, 'year')); // 默认结束日期为当前年份加一年

  const handleStartDateChange = (date: any) => {
    setStartDate(date);
    
    // 更新结束日期，如果新开始日期大于当前结束日期，则设置为结束日期减一年
    setEndDate(Math.min(endDate, date.add(1, 'year')));
  };

  const handleEndDateChange = (date: any) => {
    if (date.diff(startDate, 'days') > 365) {
      setEndDate(startDate.clone().add(1, 'year')); // 如果结束日期超过开始日期一年，还原为开始日期加一年
    } else {
      setEndDate(date);
    }
  };

  return (
    <div>
      <DatePicker
        value={[startDate, endDate]}
        onChange={([start, end]) => {
          handleStartDateChange(start);
          handleEndDateChange(end);
        }}
        showTime
        format="YYYY-MM-DD HH:mm"
        picker="daterange"
        allowClear={false}
        style={{ width: 200 }}
      />
    </div>
  );
};

export default App;

在这个例子中，我们首先初始化了 `startDate` 和 `endDate` 为当前年份加一年，然后分别绑定了 `handleStartDateChange` 和 `handleEndDateChange` 函数到 `DatePicker` 的 `onChange` 属性上。当开始日期或结束日期改变时，我们会检查它们之间的差值，并相应地更新结束日期。