React+Antd4 Form开始、结束（截止）日期校验

需要用到的知识点

1、Ant Design 4+
2、moment.js (http://momentjs.cn/) 非必要

场景

在项目中经常会碰到需要设置日期，而且往往需要设置两个日期，这两个日期有需要相互约束，通常是一个开始日期一个截止日期。

这个时候一般都需要校验，开始日期不可以晚于结束日期。

如何校验？

这里应用的是Antd4里的date-picker组件，组件自带选择日期的onChange方法，还需要应用到form表单值域的获取，这里不做赘述。在开始日期的onChange方法中，通过表单拿到结束日期,在结束日期的onChange方法中，通过表单拿到开始日期 便于校验两个日期的大小
而日期的大小校验有很多种方法，可以用过时间戳，也可以用moment.js来校验，moment(xxx)>moment(yyy),类似这种可以看下面代码

// 这里是组件代码
<Row gutter={16}>
  <Col span={12}>
   //评估开始日期
    <Form.Item {...formParams.inspectionPlanAssessStartTime}>
      <DatePicker onChange={this.startTime} disabled={stopUse} style={{width: 220}}/>
    </Form.Item>
  </Col>
  <Col span={12}>
  	//评估结束日期
    <Form.Item {...formParams.inspectionPlanAssessEndTime}>
      <DatePicker onChange={this.endTime} disabled={stopUse} style={{width: 220}}/>
    </Form.Item>
  </Col>
</Row>
//这里是方法代码
//评估开始日期
 startTime = (date) => {
 //在开始日期的onChange方法中，通过表单拿到结束日期
   const endTime = this.queryForm.current.getFieldsValue().inspectionPlanAssessEndTime;
   if(endTime && moment(endTime)<moment(date)){
     this.queryForm.current.setFieldsValue({
       inspectionPlanAssessStartTime:null
     });
     return message.warn("开始日期不能晚于结束日期")
   }
 }
 //评估结束日期
 endTime = (date) => {
 //在结束日期的onChange方法中，通过表单拿到开始日期
   const startTime = this.queryForm.current.getFieldsValue().inspectionPlanAssessStartTime;
   if(startTime && moment(startTime)>moment(date)){
     this.queryForm.current.setFieldsValue({
       inspectionPlanAssessEndTime:null
     });
     return message.warn("开始日期不能晚于结束日期")
   }
 }

至此我们就完成了开始日期和结束日期的校验，也就可以避免我们在保存的时候开始日期比结束日期还要晚的情况