antdesign 时间组件 开始时间和结束时间联动

Ant Design 的时间组件可以通过设置属性 `onChange` 来实现开始时间和结束时间的联动。具体实现方法如下：

1. 首先，在你的组件中引入 `DatePicker` 和 `TimePicker` 组件：

   import { DatePicker, TimePicker } from 'antd';

2. 在组件的 `state` 中添加开始时间和结束时间的初始值：

   state = {
     startTime: null,
     endTime: null,
   };

3. 在 `DatePicker` 和 `TimePicker` 组件中设置 `value` 和 `onChange` 属性：

   <DatePicker
     showTime
     format="YYYY-MM-DD HH:mm:ss"
     value={this.state.startTime}
     onChange={this.handleStartTimeChange}
   />
   <TimePicker
     format="HH:mm:ss"
     value={this.state.endTime}
     onChange={this.handleEndTimeChange}
   />

4. 编写 `handleStartTimeChange` 和 `handleEndTimeChange` 事件处理函数：

   handleStartTimeChange = (value) => {
     if (value && this.state.endTime && value.isAfter(this.state.endTime)) {
       // 如果开始时间比结束时间晚，则重置结束时间
       this.setState({
         startTime: value,
         endTime: null,
       });
     } else {
       this.setState({ startTime: value });
     }
   };

   handleEndTimeChange = (value) => {
     if (value && this.state.startTime && value.isBefore(this.state.startTime)) {
       // 如果结束时间比开始时间早，则重置开始时间
       this.setState({
         startTime: null,
         endTime: value,
       });
     } else {
       this.setState({ endTime: value });
     }
   };

在这两个事件处理函数中，我们首先判断新选择的时间是否符合逻辑，如果不符合，则重置另一个时间，并更新组件的状态。

需要注意的是，在比较时间的时候，我们使用了 `moment.js` 库中的 `isAfter` 和 `isBefore` 方法。因此，在使用之前，需要先引入 `moment.js` 库：

   import moment from 'moment';
   import 'moment/locale/zh-cn';

   moment.locale('zh-cn');

这样，就可以实现开始时间和结束时间的联动了。