foreign-sapphire•9mo ago

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> )

2 Replies

kapa.ai•9mo ago

Hi @MesbearizingMeat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing might be related to the way you're handling the initialValue for the DatePicker component. The DatePicker component from Ant Design expects a moment object as its value. If the value passed to it is not a moment object, it might throw the error you're seeing. In your code, you're using dayjs to create the initialValue for the DatePicker. However, dayjs and moment are not the same and their instances are not interchangeable. This might be the cause of the error. To fix this, you should convert the dayjs instance to a moment instance before passing it as the initialValue to the DatePicker. Unfortunately, the knowledge sources provided do not include a direct example of this conversion. However, there's a workaround suggested in one of the GitHub issues related to a similar problem with the DatePicker component. The solution involves using the getValueProps function in the Form.Item to convert the value to a dayjs instance:

<Form.Item
    label="Published At"
    name="publishedAt"
    getValueProps={(value) => ({
        value: value ? dayjs(value) : "",
    })}
>
    <DatePicker />
</Form.Item>

<Form.Item
    label="Published At"
    name="publishedAt"
    getValueProps={(value) => ({
        value: value ? dayjs(value) : "",
    })}
>
    <DatePicker />
</Form.Item>

Source (https://github.com/refinedev/refine/issues/1813) Please note that this solution might not work directly in your case, as it involves dayjs instead of moment. You might need to adjust it to your needs. If the problem persists, I would recommend checking the versions of antd and moment you're using, as certain versions might have compatibility issues. Also, make sure that moment is properly installed and imported in your project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@224018850419572736> kapa.ai is still learning and improving, please let us know how it did by reacting below