title: Custom DatePicker by setFieldvalues Antd
body: <p>I'm trying to customize DatePicker for data format before submitting. I use setFielsValue to override its value but it is not working.<br>
  I need to find a way to customize component and data format before submitting.</p>
  
  <p><strong>Create Form</strong> </p>
  
  <pre><code>import React, { useEffect } from 'react';
  import { Form, Button, Input, Select } from 'antd';
  import { t } from 'i18next';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import {
    closeModalAction,
    saveDraftAction
  } from '../../../redux/modal/actions';
  import { draftSelector } from '../../../redux/modal/selectors';
  import { getAllPositionsAction } from '../../../redux/positions/actions';
  import {
    createEmployeeAction,
    uploadImageAction
  } from '../../../redux/employees/actions';
  import CustomUpload from '../../../components/common/CustomUpload';
  import CustomDatePicker from '../../../components/common/CustomDatePicker';
  
  const { Option } = Select;
  
  const Create = ({
    form,
    createEmployee,
    positions,
    closeModal,
    id,
    saveDraft,
    getAllPosition,
    draft
  }) =&gt; {
    const {
      validateFields,
      getFieldDecorator,
      setFieldsValue,
      getFieldsValue
    } = form;
    const onSubmit = e =&gt; {
      e.preventDefault();
      validateFields((error, values) =&gt; {
        console.log(values);
        if (!error) {
          createEmployee({
            employee: {
              name: values.name,
              job: values.job,
              email: values.email,
              birthday: values.birthday,
              dayInCompany: values.dayInCompany,
              imgURL: values.imgURL
            }
          });
          closeModal(id);
        }
      });
    };
    useEffect(() =&gt; {
      if (draft) {
        setFieldsValue(draft);
      }
      return () =&gt; {
        const values = getFieldsValue();
        saveDraft({ data: values, id });
      };
    }, [draft, getFieldsValue, id, saveDraft, setFieldsValue]);
  
    useEffect(() =&gt; {
      getAllPosition();
    }, [getAllPosition]);
  
    return (
      &lt;Form onSubmit={onSubmit}&gt;
        &lt;Form.Item label="Employee Id" colon={false}&gt;
          {getFieldDecorator('id', {
            rules: [{ required: true, message: 'Please enter email' }]
          })(&lt;Input /&gt;)}
        &lt;/Form.Item&gt;
        &lt;Form.Item label="Email" colon={false}&gt;
          {getFieldDecorator('email', {
            rules: [{ required: true, message: 'Please enter email' }]
          })(&lt;Input /&gt;)}
        &lt;/Form.Item&gt;
        &lt;Form.Item label="Name" colon={false}&gt;
          {getFieldDecorator('name', {
            rules: [{ required: true, message: 'Please enter email' }]
          })(&lt;Input /&gt;)}
        &lt;/Form.Item&gt;
        &lt;CustomDatePicker
          {...{ form }}
          label="Start Work Date"
          colon={false}
          src="dayInCompany"
          required
          message="Please enter date"
        /&gt;
        &lt;CustomDatePicker
          {...{ form }}
          label="BirthDay"
          colon={false}
          src="birthday"
          required
          message="Please enter date"
        /&gt;
        &lt;Form.Item label="Position" colon={false}&gt;
          {getFieldDecorator('job', {
            rules: [
              {
                required: true,
                message: 'Please select your job!'
              }
            ]
          })(
            &lt;Select&gt;
              {positions.map(position =&gt; (
                &lt;Option key={position.id} value={position.name}&gt;
                  {position.name}
                &lt;/Option&gt;
              ))}
            &lt;/Select&gt;
          )}
        &lt;/Form.Item&gt;
        &lt;CustomUpload
          {...{ form }}
          label="Avatar"
          src="imgURL"
          colon={false}
          message="Please up your image"
          required
        /&gt;
        &lt;Form.Item&gt;
          &lt;Button onClick={() =&gt; closeModal(id)}&gt;{t('button.cancel')}&lt;/Button&gt;
          &lt;Button type="primary" htmlType="submit"&gt;
            {t('button.create')}
          &lt;/Button&gt;
        &lt;/Form.Item&gt;
      &lt;/Form&gt;
    );
  };
  
  Create.propTypes = {
    form: PropTypes.any,
    closeModal: PropTypes.func,
    createEmployee: PropTypes.func,
    draft: PropTypes.object,
    saveDraft: PropTypes.func,
    id: PropTypes.number,
    positions: PropTypes.array,
    getAllPosition: PropTypes.func.isRequired,
    uploadImage: PropTypes.func.isRequired
  };
  
  Create.defaultProps = {
    positions: []
  };
  
  const mapStateToProps = (state, props) =&gt; ({
    draft: draftSelector(state, props),
    positions: state.positions.positions
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
    closeModal: id =&gt; dispatch(closeModalAction(id)),
    createEmployee: params =&gt; dispatch(createEmployeeAction(params)),
    saveDraft: params =&gt; dispatch(saveDraftAction(params)),
    getAllPosition: () =&gt; dispatch(getAllPositionsAction()),
    uploadImage: (file, onSuccess) =&gt; dispatch(uploadImageAction(file, onSuccess))
  });
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Form.create()(Create));
  </code></pre>
  
  <p><strong>CustomeDatePicker</strong> with setFieldsValue </p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { Form, DatePicker } from 'antd';
  
  const CustomDatePicker = ({ form, label, src, colon, required, message }) =&gt; {
    console.log(form);
    const { getFieldDecorator, setFieldsValue } = form;
  
    const handleChange = e =&gt; {
      const date = new Date(e).getTime();
      setFieldsValue({
        [src]: date
      });
    };
    return (
      &lt;Form.Item label={label} colon={colon}&gt;
        {getFieldDecorator(src, {
          rules: [
            {
              required,
              message
            }
          ]
        })(&lt;DatePicker onChange={handleChange} /&gt;)}
      &lt;/Form.Item&gt;
    );
  };
  
  CustomDatePicker.propTypes = {
    form: PropTypes.shape({
      getFieldDecorator: PropTypes.func.isRequired,
      setFieldsValue: PropTypes.func.isRequired
    }),
    label: PropTypes.string,
    src: PropTypes.string.isRequired,
    colon: PropTypes.bool,
    required: PropTypes.bool,
    message: PropTypes.string
  };
  
  CustomDatePicker.defaultProps = {
    colon: true,
    required: false,
    message: null
  };
  
  export default CustomDatePicker;
  </code></pre>
  
  <p>Please help me some way to make it. Thanks so much.</p>