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>

Klondike

Answer 1

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

Toms

Answer 2

Add valuePropName to <Form.Item>

e.g.

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

Incorporeity

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. – Latchkey

This worked for me. The critical part is that the error is thrown for DatePickers inside of a <Form.Item>. Thanks for the answer! – Lotson

Feels like magic, but worked for me as well – Phytobiology

This should be selected as the correct answer... – Postnasal

Works like magic! – Intelligence

Answer 3

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)
                : ""
            }
          />

Amado

Answer 4

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>

Holozoic

I just found that you can use DatePicker inside <Form.Item> by removing initialValue or defaultValue. – Scherzando

Answer 5

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

I have them in Form.Item

I solved this by:

1. initialise the form value when the page load

2. 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

Ledger

Better to provide a sample – Discouragement

Answer 6

Try this, this worked for me

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

Florio

Answer 7

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>

Sophiesophism

Answer 8

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

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

Lamasery

Answer 9

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.

Bibbye

Answer 10

Try this, add getValueProps to <Form.Item>

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

Sapotaceous

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 – Anytime

Answer 11

This Will Fix your issue.

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

Beef