Antd Datepicker (Date. Clone Is Not a Function)

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>

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

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

Try this, this worked for me

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

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

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

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.

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>

This Will Fix your issue.

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