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

在 TypeScript 中，Ant Design 的 RangePicker 组件允许用户选择日期范围。如果你想要限制开始时间和结束时间最多相差一年，你可以通过监听 `onChange` 事件，并在事件处理器里对选择的日期进行检查。以下是一个简单的例子：

import { RangePicker } from 'antd';
import moment from 'moment'; // 使用 moment.js 进行日期操作

const { Panel } = RangePicker;

class CustomRangePicker extends React.Component {
  state = {
    startValue: '',
    endValue: '',
    isValid: true,
  };

  handleStartDateChange = (date) => {
    this.setState({ startValue: date });
  };

  handleEndDateChange = (date) => {
    const startDate = moment(this.state.startValue);
    const endDate = moment(date);

    if (
      endDate.diff(startDate, 'years') > 1 ||
      (!startDate || !endDate || endDate.isBefore(startDate))
    ) {
      this.setState({
        endValue: '',
        isValid: false,
      });
    } else {
      this.setState({ endValue: date, isValid: true });
    }
  };

  handleSubmit = () => {
    console.log('Selected dates:', this.state.startValue, this.state.endValue);
    if (this.state.isValid) {
      // 如果验证通过，可以在这里提交数据
    }
  };

  render() {
    return (
      <Panel
       .RangePicker
        showTime={{ format: 'YYYY-MM-DD HH:mm:ss' }}
        onChange={this.handleEndDateChange}
        onOk={this.handleSubmit}
        startPlaceholder="开始日期"
        endPlaceholder="结束日期"
        getPopupContainer={(triggerNode) => triggerNode.parentNode}
      >
        <Panel.Input
          placeholder="开始日期"
          value={this.state.startValue}
          disabled={!this.state.isValid}
          onChange={this.handleStartDateChange}
        />
        <Panel.Input
          placeholder="结束日期"
          value={this.state.endValue}
          disabled={!this.state.isValid}
        />
      </Panel>
    );
  }
}

export default CustomRangePicker;

在这个示例中，我们首先初始化了 `startValue` 和 `endValue` 以及一个布尔值 `isValid` 来跟踪是否允许选择超过一年的时间差。当开始日期改变时，会更新 `startValue` 并计算与当前结束日期之间的年份差。如果超出一年，我们会清空 `endValue` 和设置 `isValid` 为 `false`。当用户尝试提交时，只有在 `isValid` 为真时才触发 `handleSubmit`。