Yup日期验证+1天

Question

我有一个使用formik/yup的表单，并且我正在根据表单中的其他日期验证日期。我有expirationDate的字段，我希望在输入表单的enteredDate的第二天至少为。

我目前有这个，它可以工作，但对enteredDate有效——问题是，如果您将06/21/21设置为输入日期，它会接受06/21/22作为到期日期——我需要它将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".

我怎么能告诉你第二天用？

Answer 1

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

这应该按预期工作：

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;
})
});

Answer 2

请尝试此模式。请记下我用过的时间。在.test中，您可以访问这两个值(enteredDate和expirationDate(。您可以使用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;
}
}
),
});

Answer 3

检查这个片段

let today = new Date();
let tomorrow = new Date(new Date(today).setDate(today.getDate() + 1));
console.log("today: ", today);
console.log("tomorrow: ", tomorrow);