ant.design v5.2.0 - date.locale is not a function

Question

I have the following problem:

I am using ant.design in version 5.2.0. When I use the component as follows, I always get the attached error message when I pass a date to for the Form.Item in dayjs format: enter image description here

If I don't specify the default value as dayjs <form> I don't get an error, but I also don't get a prefilled value in the datepicker.

What else can I try?

Here is an excerpt of the source code:

<Form
    form={formRef}
    onFinish={handleSubmit}
    initialValues={{...collaboration, dueDate: dayjs(collaboration.dueDate)}}
>
    <Form.Item label="DatePicker" name={"dueDate"} rules={[{ required: true, message: 'Please select time!' }]}>
         <DatePicker style={{width: "100%"}}/>
    </Form.Item>
</Form>

Orthman

Your code look fine. Can you please create a code sandbox? – Refractor

Answer 1

I get the same error when I was trying to set a string value to Datepicker:

example form init value:

values = {
   //other values
   ...
   start:'2023-12-12 13:00:00',

   end:'2023-12-15 09:00:00'
}

I had to convert my dates string using dayjs:

 import dayjs from 'dayjs';
 ...
 let date_fields = ['start','end'];
 for(let field of date_fields){
    values[field] = values[field]? dayjs(values[field]):null;
 }
 // now is safe to init form
 form.setFieldsValue(values);

Priscillaprise

I got the same, only with initialValues. I consider this unexpected behaviour in the datepicker component – Ginzburg

Answer 2

Here is my code ** it is working for me ** antdesign v5

• datepicker of form values will not accept string;

const dateFormat = "DD-MM-YYYY";

const init = {
    dateOfBirth: dayjs(),
  };

<Form
   layout="vertical"
   hideRequiredMark
   onFinish={(values) => console.log(values)}
   initialValues={init}
 >
    <Form.Item label="Date Of Birth" name="dateOfBirth">
       <DatePicker format={dateFormat} />
    </Form.Item>
 </Form>

Woolson

how is your dateFormat define? – Hightoned

just added the date format. – Woolson

Answer 3

Here is a sandbox for this case: https://codesandbox.io/s/antd-reproduction-template-forked-4mv33s?file=/index.js

Edit: It works in the sandbox :D

Orthman

Since, you are posting an answer as an update to your own question, you can directly edit the question and put the link in there. – Anecdote

Oh okay. Didn’t thought about that. I already found a solution :) I will post it in the evening. – Undecagon

Answer 4

For me, in table columns config, when I change the key value from createdAt to created_at, it throws this error.

However I can change it to created_at_123. Some values may be used internally by the component. It is not mentioned in the docs.

Aristophanes

Answer 5

use moment :)

This error occurs because the value you are trying to fill in is off the default date picker setting. When I used the datepicker without prefilled data it works but when you have to edit something for example in a modal this error appears. I fixed it with

npm install moment

import moment from 'moment';

And to fix your specific error:

your function, where you set the form data:

    form.setFieldsValue({
      ...formnamehere,
      dueDate: moment(collaboration.dueDate),
    });

Viscometer

Answer 6

I solved with ConfigProvider as mentioned https://ant.design/components/date-picker#localization

Heres are sample code.

// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
// Make sure you import the relevant dayjs file as well, otherwise the locale won't change for all texts (e.g. range picker months)
import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';

import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

<ConfigProvider locale={locale}>
  <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
</ConfigProvider>;

Lengthwise