Formik touched with react-day-picker

user_5257760 0
Viewed 590

I have DayPickerInput set up in my Formik form.

<DayPickerInput
   id="hire_date"
   name="hire_date"
   formatDate={formatDate}
   parseDate={parseDate}
   format="DD/MM/YYYY"
   onDayChange={date => setFieldValue('hire_date', date)}
   onChange={handleChange}
   onBlur={handleBlur}
   value={values.hire_date}
   placeholder={`${formatDate(new Date(), "DD/MM/YYYY")}`}
   inputProps={{ 
      style: { width: "100%", padding: "0.75rem", border: "1px solid #e2e8f0", borderRadius: "0.25rem" } 
   }}
 />
 <Error touched={touched.hire_date} message={errors.hire_date} />

When i click in and out of the field without selecting a date i no longer get error showing.

How do i get touched to work with DayPickerInput field?

react-day-picker formik reactjs
1 Answers

react-day-picker doesn't supportonChange and onBlur but what you can do is to override the input component by passing your custom input to DayPickerInput like this :

<Field name="date">
              {({ field, form }) => (
                <DayPickerInput
                  name={field.name}
                  component={props => (
                      <input
                        {...field}
                        onClick={props.onClick}
                        placeholder={props.placeholder}
                      />
                  )}
 </Field>
user_115280640
Related