Yup with Formik doesn't Datepicker value

Question

I have been trying everything to make this form work with yup, but when using the date-picker, the value doesn't register either within the field or with yup. My relevant imports are formik, yup, useForm and yupResolver.

I have removed non-relevant code to save space. The other fields i have are first name, last name, email and phone number, and they all work as they should, with values registering and errors showing up when they don't fill the criteria.

I have a console log withing the formik element which logs all the values, and all the values get logged properly except the dates, which stand empty.

const Form = () => {
    const [fromDate, setFromDate] = useState(new Date());

    return (
        <>
            <div>
                <Formik validationSchema={formVal}>
                    {({ values,
                        errors) => ( 
                        <form onSubmit={handleSubmit(onSubmit)}>
                            <div>
                                <DatePicker
                                    id="fromDate"
                                    onChange={(date) => {
                                        setFieldValue(date);
                                    }}
                                />
                            </div>
                            <Button type="submit" ></Button>
                        </form>
                )}
                </Formik>
            </div>
        </>
    )}

Guy Levinger Guy Levinger · Accepted Answer · 2021-04-24T12:02:24

It seems like you're not using 'setFieldValue' correctly; The 1st argument should be the form's field name.

Should be something like this: setFieldValue('fromDate', date); See https://formik.org/docs/api/formik for reference.

Also, make sure that variable 'date' is of type Date and not an object, containing the actual date value.

Yup with Formik doesn't Datepicker value

1 Answers