Search code examples
javascriptvalidationyupdayjs

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

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