Yup date validation, End date after start date

user_16443282 0
Viewed 1460

here's my code, i'm trying to force the two date fields always to be different, the end date must be at least 1 day after the start date.

const EditSchema = Yup.object().shape({

       StartDate: Yup.date()
      .transform(value => (isDate(value) ? undefined : value))
      .typeError('Enter a start date')
      .required('Enter a start date'),

       EndDate: Yup.date()
      .min(Yup.ref('StartDate'), 'End date must be after start date')
      .transform(value => (isDate(value) ? undefined : value))
      .typeError('Enter an end date')
      .required('Enter an end date')
});
yup reactjs javascript
1 Answers

After hours trying to figure out how to do it.

here's the code.

when you have a date picker and you select a date, it will be something like this "01/01/2021 00:00:00".

So if you need the end date to be at least 1 day after the start date, you've got to add 1 hour to the start date which will not let you put 2 equal dates.


   StartDate: Yup.date()
      .transform(value => (isDate(value) ? undefined : value))
      .typeError('Enter a date')
      .required('Enter a date')
      ),
      EndDate: Yup.date()
      .min(Yup.ref('StartDate'), 'End date must be after start date')
      .when('StartDate', (st, schema) => {
      
        if(st != null){
          st.setHours(st.getHours() + 1);
          return schema.min(st)

        //this else prevents your page from crashing if there's any other input
        
         }else
          return schema.min('1900-01-01')

      })
      .transform(value => (isDate(value) ? undefined : value))
      .typeError('Enter a date')
      .required('Enter a date')
  });
user_164432820
Related