如何在 Ant 设计的 Form.Item 中为 DatePicker 使用 initialValue

Question

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.

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

Answer 2

I had the similar problem but the issue was different. I wan not using moment.js but I was not able to set initialValues from props in Antd version 4 form.

So, I tried a different workaround and install formik and formik-antd . After installing, I modified my function component something like this:

import React from "react"
import {
  Input,
  ResetButton,
  SubmitButton,
  Form,
} from "formik-antd"
import { Formik } from "formik"
import { Button } from "antd"
import "antd/dist/antd.css"

export function MyForm(props: any) {
  
    const onFinish = (values: any) => {
      console.log(values);
    };

  return (
    <Formik
      enableReinitialize
      initialValues={{
        company: props.myobject.company,
        account: props.myobject.account
      }}
      onSubmit={onFinish}
      validate={values => {
        if (!values.company) {
          return { company: "required" }
        }
        if (!values.account) {
          return { account: "required" }
        }
        return undefined
      }}
      render={formik => (
        <Form>
          <div className="container">
            <div className="component-container">
              <Form.Item
                name="company"
                label="Company"
                hasFeedback={true}
                showValidateSuccess={true}
              >
              <Input name="company" placeholder="Basic Input" />
              </Form.Item>
              <Form.Item
                name="account"
                label="Account"
                hasFeedback={true}
                showValidateSuccess={true}
              >
                <Input name="account" placeholder="Validated input" />
              </Form.Item>
              <Button.Group size="large">
                <ResetButton>Reset</ResetButton>
                <SubmitButton type="primary" disabled={false}>
                  Submit
                </SubmitButton>
              </Button.Group>
            </div>
          </div>
        </Form>
      )}
    />
  )
}