Formik 中的日期验证：“购买日期”必须早于“销售日期”

Question

我正在 React、Formik 和 Yup 中创建一个带有日期验证的简单表单。

如下所示，只有两个字段：datePurchase和dateSale。我为两者设置了min参数max，并根据需要设置它们：

<Formik
  initialValues={{
    datePurchase: '',
    dateSale: '',
  }}
  validationSchema={object()
    .shape({
      datePurchase: date()
        .min(new Date('01-01-2019'))
        .max(new Date())
        .required(),
      dateSale: date()
        .min(new Date('01-01-2019'))
        .max(new Date())
        .required(),
    })}
>
  {({
    values, handleChange, handleBlur,
  }) => (
      <Form>
        <input
          name="datePurchase"
          type="date"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.datePurchase}
        />
        <input
          name="dateSale"
          type="date"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.dateSale}
        />
      </Form>
    )}
</Formik>

然后，我意识到那datePurchase一定早于dateSale。

如何使用validationSchema()Yup 来实现这样的条件？这可能吗？

我尝试使用Yup 文档中的when()方法和is:参数then:，但无济于事。

Answer 1

Yup.ref 允许您引用其他兄弟姐妹 - https://github.com/jquense/yup#yuprefpath-string-options--contextprefix-string--ref

尝试一下：

validationSchema={object()
    .shape({
      datePurchase: date()
        .min(Yup.ref('dateSale')
        .max(new Date())
        .required(),
      dateSale: date()
        .min(new Date('01-01-2019'))
        .max(new Date())
        .required(),
    })}