jolly-crimson•5mo ago

Wrong datetime format for AntD DatePicker

I'm using AntD DatePicker component and when I'm on my edit page and want to fill the form with initial values, the app crashes because my ISO date time format can't be loaded into DatePicker element. How do I fix this? I can't edit the value inside formProps

2 Replies

kapa.ai•5mo ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information from the extracts, it seems like you're encountering a common issue with the AntD DatePicker component in the Refine framework. This issue is often caused by a conflict between the date format provided by your API and the format expected by the DatePicker. One of the solutions suggested in the Github issue (https://github.com/refinedev/refine/issues/1259) is to wrap the date string value fetched from the API in the getValueProps function. This function is used to format the value before it's passed to the form field. Here's an example from the issue:

<Edit
    {...props}
    initialValue={async () => {
        const { data } = await dataProvider.getOne(resource, {
            id: id,
        });

        return {
            ...data.record,
            publishedAt: dayjs(data.record.publishedAt),
        };
    }}
>
    <Form.Item
        name="publishedAt"
        label="Published At"
        rules={[
            {
                required: true,
            },
        ]}
    >
        <DatePicker />
    </Form.Item>
</Edit>

<Edit
    {...props}
    initialValue={async () => {
        const { data } = await dataProvider.getOne(resource, {
            id: id,
        });

        return {
            ...data.record,
            publishedAt: dayjs(data.record.publishedAt),
        };
    }}
>
    <Form.Item
        name="publishedAt"
        label="Published At"
        rules={[
            {
                required: true,
            },
        ]}
    >
        <DatePicker />
    </Form.Item>
</Edit>

In this example, dayjs is used to parse the date string into a format that can be used by the DatePicker. You might need to adjust this code to match your specific date format and field names. Also, make sure you're using the same version of dayjs as Refine, which is currently 1.10.5. If you're using yarn, you might need to switch to npm as there have been some issues reported with yarn. If you're still encountering issues, it might be helpful to check out the Refine DatePicker example (https://codesandbox.io/s/refine-date-picker-example-r86xo?file=/src/App.tsx) for more guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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