是的日期验证 + 1 天

问题描述

我有一个使用 formik / yup 的表单，我正在对照表单中的其他日期验证日期。我有一个 expirationDate 字段，我希望至少在 后一天 enteredDate，即输入表单的那一天。

我目前有此功能，但可以根据 enteredDate 进行验证--问题是，如果您将 06/21/21 设置为输入日期，它会接受 06/21/21 作为到期日期- - 我需要将 06/22/21 设置为最小日期，或 enteredDate + 1 day。

yup.date('Expiration Date')
    .nullable()
    .min(yup.ref('enteredDate'),({ min }) => `Expiration Date needs to be after Entered Date`
    )

我尝试了许多变体

yup.date('Expiration Date')
    .nullable()
    .min(yup.ref('enteredDate') ? daysjs(yup.ref('enteredDate').add(1,'day') : null,({ min }) => `Expiration Date needs to be after Entered Date`
    )

但 yup.ref 似乎没有返回日期对象，因为错误是 TypeError: The value of field Could not be cast to a value that satisfies the schema type: "date".

我怎样才能告诉 yup 第二天使用？

解决方法

您需要使用 .when 方法将一个字段连接到另一个字段。 Docs.

这应该会按预期工作：

const schema = object({
  enteredDate: date().required(),expirationDate: date().when("enteredDate",(enteredDate,schema) => {
    if (enteredDate) {
      // This can be calculated in many ways. Just be sure that its type is `Date` object
      const dayAfter = new Date(enteredDate.getTime() + 86400000);

      return schema.min(dayAfter);
    }

    return schema;
  })
});

,

请试试这个模式。请记下我使用过的时刻。在 .test 中，您可以访问这两个值（enteredDate 和 expireDate）。您可以使用 dayjs 编写比较逻辑。

const validationSchema = Yup.object().shape({
    expirationDate: Yup.date()
      .required("Please input Expiry Date")
      .nullable()
      .test(
        "","exp date should be greater than Entered Date + 1",(val,props) => {
          const expiryDate = moment(val);
          const enteredDate = moment(props.parent.enteredDate);
          const tmpExpiryDate = moment(enteredDate).add(1,"days");

          if (!tmpExpiryDate.isAfter(expiryDate)) {
            return true;
          }
        }
      ),});

,

检查这个片段

let today = new Date();
let tomorrow = new Date(new Date(today).setDate(today.getDate() + 1));

console.log("today: ",today);
console.log("tomorrow: ",tomorrow);