Antd datepicker (date.clone is not a function)

user_12642192 0
Viewed 29712

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>
antd momentjs react-hooks reactjs
10 Answers

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

user_76787990

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>
user_116708630

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

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

user_120715530

Try this, this worked for me

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

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

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

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.

user_60856740

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>
user_45364200

Add this to <Form.Item> - valuePropName='date'

user_200708220

This Will Fix your issue.

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