Ant Design says I can't use defaultValue if I wrapped it with Form.Item with name.

/components/form/

After wrapped by Form.Item with name property, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls, the flow of form data will be handled by Form which will cause:

You shouldn't use onChange on each form control to collect data(use onValuesChange of Form), but you can still listen to onChange.

You cannot set value for each form control via value or defaultValue prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamiclly, you should use setFieldsValue in that situation.

So I set initialValues to Form component and I got this error when I use Form with DatePicker.

moment.js:93 Uncaught TypeError: date.clone is not a function
    at Object.format (moment.js:93)
    at useValueTexts.js:13
    at Array.map (<anonymous>)
    at useValueTexts.js:12
    at useMemo (useMemo.js:6)
    at useValueTexts (useValueTexts.js:7)
    at InnerPicker (Picker.js:158)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)

My code is like this.
worker object has a dateOfBirth which is ISOString.

const dateFormat = 'YYYY/MM/DD';

return (
  <Form
    layout="vertical"
    hideRequiredMark
    onFinish={values => onFinish(values)}
    initialValues={worker}
  >
    <Form.Item
      label="Date Of Birth"
      name="dateOfBirth"
    >
      <DatePicker format={dateFormat} />
    </Form.Item>
  </Form>
);

How can I get and use default value of worker's dateOfBirth?
Thank you.

Ant Design says I can't use defaultValue if I wrapped it with Form.Item with name.

https://ant.design/components/form/

After wrapped by Form.Item with name property, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls, the flow of form data will be handled by Form which will cause:

You shouldn't use onChange on each form control to collect data(use onValuesChange of Form), but you can still listen to onChange.

You cannot set value for each form control via value or defaultValue prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamiclly, you should use setFieldsValue in that situation.

So I set initialValues to Form component and I got this error when I use Form with DatePicker.

moment.js:93 Uncaught TypeError: date.clone is not a function
    at Object.format (moment.js:93)
    at useValueTexts.js:13
    at Array.map (<anonymous>)
    at useValueTexts.js:12
    at useMemo (useMemo.js:6)
    at useValueTexts (useValueTexts.js:7)
    at InnerPicker (Picker.js:158)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)

My code is like this.
worker object has a dateOfBirth which is ISOString.

const dateFormat = 'YYYY/MM/DD';

return (
  <Form
    layout="vertical"
    hideRequiredMark
    onFinish={values => onFinish(values)}
    initialValues={worker}
  >
    <Form.Item
      label="Date Of Birth"
      name="dateOfBirth"
    >
      <DatePicker format={dateFormat} />
    </Form.Item>
  </Form>
);

How can I get and use default value of worker's dateOfBirth?
Thank you.

• javascript
• reactjs
• antd

1 Answer 1

The initialValue of the DatePicker component must be a moment object. You will need to convert dateOfBirth field on the worker object from an ISOString to a moment object as illustrated below:

const dateFormat = "YYYY/MM/DD";

const worker = {
  dateOfBirth: moment('2020-06-09T12:40:14+0000')
};

ReactDOM.render(
  <Form
    layout="vertical"
    hideRequiredMark
    onFinish={values => onFinish(values)}
    initialValues={worker}
  >
    <Form.Item label="Date Of Birth" name="dateOfBirth">
      <DatePicker format={dateFormat} />
    </Form.Item>
  </Form>,
  document.getElementById("container")
);

CodeSandbox Link:

https://codesandbox.io/s/antdesign-setting-initialvalue-on-datepicker-inside-form-ypi4u?file=/index.js:239-652