How to cross-verify dates before and after ant-design Form

The

form has a start and end date, which requires context. How can it be cross-validated?
the problem I encountered is:
step1: first set the start date to 3br 23
step2: sets the end as scheduled to 3x21, the end date component verification prompt "cannot be later than the start date, bulabula"
step3: sets the start time not later than the start date, and the component of the end date still prompts "cannot be later than the start date, bulabula"
ideally, the start time is set in step3. Then the end date should be verified again.

my first thought:

1. validator "validator" this.toDateSelect(null, toMoment, callback) 

also ask the great gods to correct, thank you!

my code is as follows:

render part

<Col span={6}>
                  <FormItem
                    {...formItemLayout}
                    label=""
                    >
                    {getFieldDecorator("costDateFrom", {
                      initialValue: null,
                      rules: [
                        { required: true, message: "" },
                        { validator: this.fromDateSelect},
                      ]
                    })(
                      <DatePicker disabled={disabledEdit} format="YYYY-MM-DD" />
                    )}
                  </FormItem>
                </Col>
                <Col span={6}>
                  <FormItem
                    {...formItemLayout}
                    label=""
                    >
                    {getFieldDecorator("costDateTo", {
                      initialValue: null,
                      rules: [
                        { required: true, message: "" },
                        { validator: this.toDateSelect},
                      ]
                    })(
                      <DatePicker disabled={disabledEdit} format="YYYY-MM-DD" />
                    )}
                  </FormItem>
                </Col>

validate function

fromDateSelect(rule, fromMoment, callback) {
    const { getFieldValue } = this.props.form;
    const toMoment = getFieldValue("costDateTo");
    // 
    if (!toMoment || !fromMoment) {
      return callback()
    }

    if (toMoment.isBefore(fromMoment, "day")) {
      return callback("")
    }

    try{
      this.toDateSelect(null, toMoment, callback)
    } catch(e) {
      console.log(e)
    }

    return callback()
  }
  toDateSelect(rule, toMoment, callback) {
    const { getFieldValue } = this.props.form;
    const fromMoment = getFieldValue("costDateFrom");
    // 
    if (!toMoment || !fromMoment) {
      return callback()
    }

    if (toMoment.isBefore(fromMoment, "day")) {
      return callback("")
    }
    return callback()
  }
Feb.28,2021
Menu