CODEWITHSUNDEEP
javascriptreactjsnext.jsreact-hooksantd
Gunsela
Gunsela

Reputation: 470

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

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>

Upvotes: 25

Views: 55641

Answers (11)

叶ciel
叶ciel

Reputation: 1

Try this, add getValueProps to <Form.Item>

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

Upvotes: 0

Alexander Papashvili
Alexander Papashvili

Reputation: 141

Add valuePropName to <Form.Item>

e.g.

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

Upvotes: 14

Teriel
Teriel

Reputation: 43

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>

Upvotes: 1

PeakFish
PeakFish

Reputation: 55

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.

Upvotes: 0

Jaimin Vyas
Jaimin Vyas

Reputation: 1

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

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

Upvotes: 0

Vimal Saifudin
Vimal Saifudin

Reputation: 1845

Try this, this worked for me

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

Upvotes: 1

Khushal Bhalsod
Khushal Bhalsod

Reputation: 187

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

Upvotes: 6

Sjonchhe
Sjonchhe

Reputation: 828

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

Upvotes: 30

Shakti Singh
Shakti Singh

Reputation: 9

This Will Fix your issue.

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

Upvotes: -2

KeepLearning
KeepLearning

Reputation: 377

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

Upvotes: 1

Mistico
Mistico

Reputation: 355

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>

Upvotes: 2

Related Questions