'yup date validation - Start Date must not be same as end date
I am currently stuck on how to do validation with yup for same date.
Currently I am able to validate if endDate is not before startDate using :
schema = yup.object().shape({
startDate: yup.date().min(new Date(),'Please choose future date'),
endDate: yup
.date()
.min(
yup.ref("startDate"),
"End date has to be more than start date"
),
})
But it is not checking for same date. I am well aware of this thread : Date range validation - Start Date must not be same as End Date in jquense / yup , but it is not solved yet and using momentjs. My company is strictly using dayjs for this project.
I hope you can help me with solution using JS or dayjs.
Thanks !
Solution 1:[1]
You can use this:
schema = yup.object().shape({
startDate: yup.date().min(new Date(),'Please choose future date'),
endDate: yup
.date()
.when('startDate',
(startDate, schema) => {
if (startDate) {
const dayAfter = new Date(startDate.getTime() + 86400000);
return schema.min(dayAfter, 'End date has to be after than start date');
}
return schema;
}),
})
Solution 2:[2]
Here is a solution that worked for me.
const validationSchema = Yup.object({
startDate: Yup.date().required(),
endDate: Yup.date().test(
"same_dates_test",
"Start and end dates must not be equal.",
function (value) {
const { startDate } = this.parent;
return value.getTime() !== startDate.getTime();
}
),
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | Christian Ledgard |