title: How do I validate if a start date is after an end date with Yup?
body: <p>I have a form that creates an event using Formik library. I need to check to see if the start date overlaps the end date and vice-versa. I have two date pickers that choose the date and time. How can I use Yup to validate this and show an error message if they do overlap?</p>
  
  <p>Thanks for the help in advance</p>
  
  <pre><code>const validationSchema = Yup.object().shape({
      eventName: Yup.string()
          .min(1, "Must have a character")
          .max(10, "Must be shorter than 255")
          .required("Must enter an event name"),
  
      email: Yup.string()
          .email("Must be a valid email address")
          .max(255, "Must be shorter than 255")
          .required("Must enter an email"),
  
      eventStartDate: Yup.date()
          .required("Must enter start date"),
  
  
      eventEndDate: Yup.date()
          .required("Must enter end date")
  
  
  })
  
  var defaultValue = new Date().toDateString
  
  
  export default function EventForm(){
  
      return (
          &lt;Formik 
          initialValues={{eventName: "", email: "", }}
          validationSchema={validationSchema}
          onSubmit={(values, {setSubmitting, resetForm}) =&gt; {
              setTimeout(() =&gt; {
  
          }}
          &gt;
              { ({
                  values, 
                  errors, 
                  touched, 
                  handleChange, 
                  handleBlur,
                  handleSubmit,
                  isSubmitting
              }) =&gt; (
                  &lt;form onSubmit={handleSubmit}&gt;
                  &lt;div className="input-row"&gt;
                      &lt;TextField
                          id="eventName"
                          label="Event Name"
                          margin="normal"
                          variant="filled"
                          onChange={handleChange}
                          onBlur={handleBlur}
                          value={values.eventName}
                          className={touched.eventName &amp;&amp; errors.eventName ? "has-error" : null}
                          /&gt;
                      &lt;Error touched={touched.eventName} message={errors.eventName}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className="dateHolder"&gt;
                      &lt;div className="startDate"&gt;
                              &lt;TextField 
                                  id="eventStartDate"
                                  label="Event Start Date"
                                  type="datetime-local"
                                  InputLabelProps={{
                                      shrink: true
                                  }}
                                  format="yyy-dd-mm HH:MM:ss"
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.eventStartDate}
                              /&gt;
                              &lt;Error touched={touched.eventStartDate} message={errors.eventStartDate}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className="endDate"&gt;
                      &lt;TextField 
                                  id="eventEndDate"
                                  label="Event End Date"
                                  type="datetime-local"
                                  InputLabelProps={{
                                      shrink: true
                                  }}
                                  format="yyy-dd-mm HH:MM:ss"
                                  onChange={handleChange}
                                  onBlur={handleBlur}
                                  value={values.eventEndDate}
                              /&gt;
                              &lt;Error touched={touched.eventEndDate} message={errors.eventEndDate}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
                  &lt;div className="input-row"&gt;
                  &lt;button type="submit" disabled={isSubmitting} &gt;
                      Submit
                  &lt;/button&gt;
            &lt;/div&gt;
  
              &lt;/form&gt;
              )}
          &lt;/Formik&gt;
      )
  
  }
  </code></pre>