Formik, React-Datepicker error
I am getting
the formik form
FormikDatePicker Component
I don't see why I'm getting the error
TypeError: Cannot read properties of undefined (reading 'type')
when I try to pick a date with the <FormikDatePicker name="time" className='input' placeholder="Time" />
<FormikDatePicker name="time" className='input' placeholder="Time" />
<Formik
initialValues={{
name: '',
points: 1,
image: 'https://placehold.co/600x400.png',
description: '',
time: new Date()
}}
onSubmit={(
values: Values,
{ resetForm }: FormikHelpers<Values>
) => {
mutate({
data: {
name: values.name,
points: values.points,
image: values.image,
description: values.description,
clubId: String(clubId),
time: values.time,
}
})
}}
>
<Formik
initialValues={{
name: '',
points: 1,
image: 'https://placehold.co/600x400.png',
description: '',
time: new Date()
}}
onSubmit={(
values: Values,
{ resetForm }: FormikHelpers<Values>
) => {
mutate({
data: {
name: values.name,
points: values.points,
image: values.image,
description: values.description,
clubId: String(clubId),
time: values.time,
}
})
}}
>
import { useFormikContext } from "formik";
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const FormikDatePicker = (props) => {
const formik = useFormikContext(); // or `const [field] = useField(props);`
return <DatePicker
timeLabelInput="Time:"
dateFormat="MMMM d, yyyy h:mm aa"
showTimeInput
onChange={formik.handleChange(props.name) /* or `field.onChange` */} {...props} />
}
export default FormikDatePicker;
import { useFormikContext } from "formik";
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const FormikDatePicker = (props) => {
const formik = useFormikContext(); // or `const [field] = useField(props);`
return <DatePicker
timeLabelInput="Time:"
dateFormat="MMMM d, yyyy h:mm aa"
showTimeInput
onChange={formik.handleChange(props.name) /* or `field.onChange` */} {...props} />
}
export default FormikDatePicker;
1 Reply
found a solution
<DatePicker
selected={values.time}
dateFormat="MMMM d, yyyy h:mm aa"
name="startDate"
className='input text-black bg-base-200'
showTimeSelect
timeFormat="HH:mm"
timeIntervals={5}
onChange={date => setFieldValue('time', date)}
/>
<DatePicker
selected={values.time}
dateFormat="MMMM d, yyyy h:mm aa"
name="startDate"
className='input text-black bg-base-200'
showTimeSelect
timeFormat="HH:mm"
timeIntervals={5}
onChange={date => setFieldValue('time', date)}
/>