Ant design DatePicker in form

Question

I'm using DatePicker component from antd inside a form and want to change the default onChange and value of props in DatePicker but it is not working.

<Form.Item
  label='Test Label'
  name='startDate'
  getValueFromEvent={(onChange) => moment(onChange).format('YYYY-MM-DD')}
  getValueProps={(i) => moment(i)}
>
  <DatePicker format='YYYY-MM-DD' style={{ width: '100%' }} />
</Form.Item>

When I use DatePicker outside of the form it works:

<DatePicker value={moment()} style={{ width: '100%' }} />

Is this a problem with getValueProps prop?

Foursquare

Answer 1

I fixed it!

In case that anyone has same issue:

you have to change getValueProps to something like this:

getValueProps={(i) => ({value: moment(i)})}

Foursquare

The date can be undefined and moment(undefined) results in current date. This equals to setting the default value to current date. Use getValueProps={(i) => ({ value: i === undefined ? undefined : moment(i) })} instead. – Quay

Answer 2

For Ant Form:

<Form.Item
        name="dateOfBirth"
        label={t('date_of_birth')}
        rules={[{ type: 'object', required: true, message: t('this_field_is_required') }]}
        defaultValue={moment(user.dateOfBirth)}
        getValueProps={(i) => ({ value: moment(i) })}
    >
        <DatePicker
            format='DD/MM/YYYY'
            placeholder='DD/MM/YYYY'
            allowClear={false}
        />
</Form.Item>

Garlinda