Antd form won't render DatePicker
I have a component that's an ant design form with various form fields. But whenever I add a <DatePicker> component as the control for a <Form.Item>, I get the error "date4.isValid is not a function". If I remove the DatePicker, the form renders again fine. If I move the DatePicker outside of the form and then give it the appropriate value from my call to useForm(), it renders perfectly fine and contains the correct date. What do I need to do to make the form work with a DatePicker?
My code looks like this:
const { saveButtonProps, formProps, formLoading, queryResult } = useForm();
return (
<Form {...formProps} layout='vertical'>
<Form.Item hidden name="id" />
<Row gutter={[32, 32]}>
<Col span={8}>
<Form.Item name="reportDate" label="Report Date" initialValue={dayjs(formProps?.initialValues?.reportDate)}>
<DatePicker placeholder="Report Date" />
</Form.Item>
</Col>
</Row>
</Form>
)
My code looks like this:
const { saveButtonProps, formProps, formLoading, queryResult } = useForm();
return (
<Form {...formProps} layout='vertical'>
<Form.Item hidden name="id" />
<Row gutter={[32, 32]}>
<Col span={8}>
<Form.Item name="reportDate" label="Report Date" initialValue={dayjs(formProps?.initialValues?.reportDate)}>
<DatePicker placeholder="Report Date" />
</Form.Item>
</Col>
</Row>
</Form>
)
