Antd datepicker (date.clone/date.load is not a function)

Question

I have a react app. There is a checkbox which disables the datepicker. But I can't select any date when I'm using checkbox to disable it. If I remove checkbox and its function there is no error. Currently, I'm getting:

date.clone is not a function

error.

const dateFormat = "YYYY-MM-DD";
const today = moment();

const [date, setDate] = useState(today);
const [disabled, setdisabled] = useState(false);

  

const onCheckboxHandle = (e) => {
    if (e.target.checked) {
      setwarntill(moment("2090-10-10"));
      setdisabled(true);
    } else {
      setwarntill(today);
      setdisabled(false);
    }
  };

<Checkbox onChange={onCheckboxHandle}>Süresiz</Checkbox>
        <Form.Item name={["user", "timetill"]} label="Uyarı Bitiş Tarihi">
          <ConfigProvider locale={locale}>
            <DatePicker
              defaultValue={moment()}
              format={dateFormat}
              onChange={(date,dateString) => setwarntill(dateString)}
              value={warntill}
              disabled={disabled}
            />
          </ConfigProvider>
        </Form.Item>

score 31 · Accepted Answer · answered Mar 17 '21 at 05:49

31

parsing the date with the help of moment works for me moment(myDate)

answered Mar 17 '21 at 05:49

Sjonchhe

790
8
16

score 9 · Answer 2 · edited Mar 14 '23 at 00:55

9

Add valuePropName to <Form.Item>

e.g.

<Form.Item valuePropName={'date'}>
    <DatePicker/>
</Form.Item>

edited Mar 14 '23 at 00:55

sun_jara

1,736
12
20

answered Sep 23 '22 at 13:50

Alexander Papashvili

91
1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 27 '22 at 13:06
2

This worked for me. The critical part is that the error is thrown for DatePickers inside of a . Thanks for the answer! – Michael K Nov 05 '22 at 14:05
1

Feels like magic, but worked for me as well – ellockie Jan 09 '23 at 22:29
This should be selected as the correct answer... – Matsu Jan 12 '23 at 03:07
Works like magic! – sun_jara Mar 13 '23 at 08:31

score 6 · Answer 3 · answered May 27 '21 at 07:30

Put DatePicker component outside <Form.Item > <Form.Item /> and check it will work fine.

         <DatePicker
            format={"YYYY-MM-DD"}
            onChange={(date, dateString) =>
              this.handleDatepickerChange(date, dateString)
            }
            placeholder="Start Date"
            value={
              this.state.startDate !== ""
                ? moment(this.state.startDate)
                : ""
            }
          />

score 2 · Answer 4 · answered Dec 12 '20 at 00:36

I have realized that when using the inside <Form.Item > <Form.Item /> it will drop 'date.clone is not a function' error. So you can put the outside of <Form.Item > <Form.Item /> it should work.

Your code should look like this:

const dateFormat = "YYYY-MM-DD";
const today = moment();

const [date, setDate] = useState(today);
const [disabled, setdisabled] = useState(false);



const onCheckboxHandle = (e) => {
    if (e.target.checked) {
      setwarntill(moment("2090-10-10"));
      setdisabled(true);
    } else {
      setwarntill(today);
      setdisabled(false);
    }
  };

<Checkbox onChange={onCheckboxHandle}>Süresiz</Checkbox>
       <ConfigProvider locale={locale}>
            <DatePicker
              defaultValue={moment()}
              format={dateFormat}
              onChange={(date,dateString) => setwarntill(dateString)}
              value={warntill}
              disabled={disabled}
            />
          </ConfigProvider>

I just found that you can use DatePicker inside `` by removing `initialValue` or `defaultValue`. — AUPMA, Dec 18 '20 at 13:15

score 1 · Answer 5 · answered Jan 15 '21 at 10:39

1

I got the same issue, it's nothing to do with Form.Item

I have them in Form.Item

I solved this by:

initialise the form value when the page load
when you initialise, remember, antD default locale is US, therefore, you need to convert your moment or string to moment with MM/DD/YYYY

then this solve my issue

answered Jan 15 '21 at 10:39

KeepLearning

327
6
13

4

Better to provide a sample – hik hyper Mar 23 '21 at 17:45

Vimal Saifudin · Answer 6 · 2021-08-05T23:51:35.437

1

Try this, this worked for me

const today = moment(new Date().getDate(),'DD/MM/YYYY')

edited Aug 05 '21 at 23:51

answered Aug 05 '21 at 23:13

Vimal Saifudin

1,815
1
21
28

score 1 · Answer 7 · answered May 28 '22 at 15:32

I faced with the similar issue (date.clone is not a function) when tryed to use saved as a string type data for DatePicker in initialValues of <Form>. Solved it by passing to initial values not string, but the moment object for DatePicker:

  const dateFormat = 'YYYY-MM-DD';
  const selectedStartDate = moment('2000-11-11', dateFormat);
  const selectedEndDate = moment('2000-12-11', dateFormat);

  const initValues = {
    startDate: selectedStartDate,
    endDate: selectedEndDate,
  };

  <Form form={form}
        name="basic"
        initialValues={initValues}>
    
    <Form.Item label={'Start'} name={'startDate'}>
      <DatePicker value={selectedStartDate}/>
    </Form.Item>

    <Form.Item label={'End'} name={'endDate'}>
      <DatePicker value={selectedEndDate}/>
    </Form.Item>

  </Form>

score 0 · Answer 8 · edited Dec 14 '21 at 15:10

0

Give a ternanry condition of isNull then it works.... Something like

date_added: _.isNull(date_added) ? null : moment(date_added);

edited Dec 14 '21 at 15:10

cigien

57,834
11
73
112

answered Dec 14 '21 at 14:21

Jaimin Vyas

1

score 0 · Answer 9 · answered Mar 04 '22 at 07:53

0

the value need a moment.js instance. you should change the onChange function to this onChange={(date,dateString) => setwarntill(date)}. and when post to server you should use moment format function to get what server needs format.

answered Mar 04 '22 at 07:53

PeakFish

45
6

叶ciel · Answer 10 · 2023-08-10T02:51:41.303

0

Try this, add getValueProps to <Form.Item>

 <Form.Item
  getValueProps={(value) => {
    return { value: dayjs(value) };
  }}
>
  <DatePicker/>
</Form.Item>

edited Aug 10 '23 at 02:51

answered Aug 10 '23 at 02:50

叶ciel

1
1

You may want to edit your answer to explain why this resolves the asker's question, further guidance can be found in the [Help Center](https://stackoverflow.com/help/how-to-answer) – Harrison Aug 14 '23 at 09:20

score -2 · Answer 11 · edited Mar 11 '21 at 00:18

-2

This Will Fix your issue.

Use defaultValue={moment(moment(), dateFormat)}

edited Mar 11 '21 at 00:18

STA

30,729
8
45
59

answered Mar 10 '21 at 14:48

Shakti Singh

9
1

Antd datepicker (date.clone/date.load is not a function)

11 Answers11

Linked