How can I compare and valiudate value of two data picker with form item rules in ant design?

Question

 <Col className='input-forms' xs={24} md={3}> <Form.Item label='start'> {getFieldDecorator('start', { rules: [ { required: true, message: 'Start Date is required' } ] })( <DatePicker format='DD-MMM-YYYY' /> )} </Form.Item> </Col> <Col className='input-forms' xs={24} md={3}> <Form.Item label='end'> {getFieldDecorator('end', { rules: [ { type: 'object', required: true, message: 'End Date is required' }] })( <DatePicker format='DD-MMM-YYYY' /> )} </Form.Item> </Col>

I have two data picker which I want to validate them base on each other : 1:start should not be bigger than the end 2-should not be empty

I have no idea what should I implement invalidation?

also I am going to implement by rule

Answer 1

<Form.Item
                    name="EndDatetime"
                    label="End Date & Time:"
                    rules={[
                      {
                        required: true,
                        message: "Please select product warranty type!",
                      },
                      {
                        validator: async (_, endDatetime) => {
                          var startDatetime =
                            formRef.current.getFieldValue("StartDatetime");
                          if (startDatetime!=null)
                            if (endDatetime <= startDatetime) {
                              return Promise.reject(
                                "Must be greater than Start Date & Time."
                              );
                            }
                        },
                      },
                    ]}
                  >
                    <DatePicker
                      format={"YYYY-MM-DD hh:mm:ss"}
                      showTime
                      size="large"
                      className="w-100"
                    />
                  </Form.Item>