Antd datepicker (date.clone is not a function)

21,305

Solution 1

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

Solution 2

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

Solution 3

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>

Solution 4

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

Share:
21,305
Gunsela
Author by

Gunsela

Updated on March 04, 2022

Comments

  • Gunsela
    Gunsela over 2 years

    I have a react app. There is a checkbox which disables the datepicker. But i cant select any date when im using checkbox to disable it. If i remove checkbox and its function there is no error. I am having date.clone is not a function error. Can someone help me please ? Thank you

    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>
    
  • AUPMA
    AUPMA over 3 years
    I just found that you can use DatePicker inside <Form.Item> by removing initialValue or defaultValue.
  • hik hyper
    hik hyper about 3 years
    Better to provide a sample