javascript - Yup date validation + 1 day - Stack Overflow

admin管理员组

文章数量:1301562

I have a form using formik / yup, and I'm validating dates against other dates in the form. I have a field for expirationDate that I want to be at a minimum the day after enteredDate, the day the form was entered.

I currently have this, which works but validates against the enteredDate-- the problem is that if you set 06/21/21 as the entered date, it accepts 06/21/21 as the expiration date-- I need it to set 06/22/21 as the minimum date, or enteredDate + 1 day.

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

I've tried many variations of

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`
    )

but the yup.ref doesn't seem to return a date object, since the error is TypeError: The value of field could not be cast to a value that satisfies the schema type: "date".

How can I tell yup to use the next day?

I have a form using formik / yup, and I'm validating dates against other dates in the form. I have a field for expirationDate that I want to be at a minimum the day after enteredDate, the day the form was entered.

I currently have this, which works but validates against the enteredDate-- the problem is that if you set 06/21/21 as the entered date, it accepts 06/21/21 as the expiration date-- I need it to set 06/22/21 as the minimum date, or enteredDate + 1 day.

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

I've tried many variations of

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`
    )

but the yup.ref doesn't seem to return a date object, since the error is TypeError: The value of field could not be cast to a value that satisfies the schema type: "date".

How can I tell yup to use the next day?

• javascript
• validation
• formik
• yup

Share Follow asked Jun 21, 2021 at 20:23 user101289user101289 10.4k1818 gold badges9191 silver badges162162 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You need to use .when method to connect one field to another. Docs.

This should work as expected:

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

Please try this schema. Please make a note I have used moment. In .test you will have access for both the values (enteredDate and expirationDate). You can write your parison logic by using 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;
          }
        }
      ),
  });

Check this snippet

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

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

本文标签： javascriptYup date validation1 dayStack Overflow