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

在 TypeScript 中，Ant Design 的 DatePicker 组件允许用户选择日期范围，包括开始时间和结束时间。如果你想限制用户选择的开始时间和结束时间最多只能相差一年，你可以通过监听日期改变事件并检查两者之间的差值来实现。以下是一个简单的示例：

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

interface Props {
  onChange: (dateRange: [moment.Moment, moment.Moment]) => void;
}

const CustomDatePicker: React.FC<Props> = ({ onChange }) => {
  const [start, setStart] = useState(moment());
  const [end, setEnd] = useState(moment());

  const handleStartDateChange = (date: moment.Moment) => {
    if (end.isBefore(date)) {
      // 如果结束时间早于新的开始时间，更新结束时间为当前开始时间减去一年
      setEnd(date.clone().subtract(1, 'year'));
    } else {
      setEnd(date);
    }
    onChange([date, end]);
  };

  const handleEndDateChange = (date: moment.Moment) => {
    // 如果新的开始时间小于等于结束时间，则不允许设置为未来日期
    if (date.isAfter(start)) {
      setStart(date.min(end));
    }
    onChange([start, date]);
  };

  return (
    <DatePicker
     .RangePicker
      showTime={{ format: 'YYYY-MM-DD HH:mm:ss' }}
      startPlaceholder="开始日期"
      endPlaceholder="结束日期"
      onChange={handleStartDateChange}
      onCalendarChange={(dates) => {
        setStart(dates[0]);
        handleEndDateChange(dates[1]);
      }}
      value={[start, end]}
    />
  );
};

export default CustomDatePicker;