title: How to set and get a datepicker value using antd with formik?
body: <p>Here i am creating Datepicker with antd and passing this antd datepicker to formik field.My sample code for Datepicker with antd </p>
  
  <pre><code>    import React from "react";
      import { Form, DatePicker } from "antd"
      import { Field } from "formik";
      import moment from 'moment';
  
      const FormItem = Form.Item;
  
      function onChange(date, dateString) {
          console.log(date, dateString);
  
      }
       const dateFormat = "MM-DD-YYYY"
  
     // Here i am adding antd error message through DateInput
  
       const DateInput = ({
              field,
              form: { touched, errors },
              ...props
          }) =&gt; {
              const errorMsg = touched[field.name] &amp;&amp; errors[field.name]
              const validateStatus = errorMsg ? "error"
                  : (touched[field.name] &amp;&amp; !errors[field.name]) ? "success"
                      : undefined
  
              return (
                  &lt;div&gt;
                      &lt;FormItem 
                      label={props.label}
                      help={errorMsg}
                      validateStatus={validateStatus}
                      hasFeedback
                     {...props.formitemlayout}&gt;
  
                      &lt;DatePicker onChange={onChange} defaultPickerValue={moment()}/&gt; 
                      &lt;/FormItem&gt;
  
                  &lt;/div&gt;
              )
          }
          export default DateInput
  </code></pre>
  
  <p>i am adding this ant component to formik field component,submit the form using handleSubmit and applying the YUP validations. iam getting a problem was submitting the form iam getting the required validation of DatePicker, and problem is selecting the values of DatePicker iam not getting the value and validation message is displayed after submitting the form.</p>
  
  <pre><code>  class FormikApollo extends React.Component {
  
          render() {
              const { values, handleSubmit, setFieldValue } = this.props
              return (
                  &lt;div align="center"&gt;
                      &lt;Form onSubmit={handleSubmit}&gt;
                                  &lt;Field
                                      name="username"
                                      label="Name"
                                      placeholder="Enter a Name"
                                      component={TextField}
                                      value={values.username}
                                      formitemlayout={formItemLayout}
  
                                  /&gt;
                                  &lt;Field
                                      name="email"
                                      label="Email"
                                      placeholder="Enter an Email"
                                      component={TextField}
                                      value={values.email}
                                      formitemlayout={formItemLayout}
  
  
                                  /&gt;
  
                                  &lt;Field
                                      name="password"
                                      label="Password"
                                      type="password"
                                      placeholder="Enter a Password"
                                      component={TextField}
                                      formitemlayout={formItemLayout}
                                  /&gt;
                                   &lt;Field
                                      name="dateofbirth"
                                      label="dateOfBirth"
                                      type="date"
                                      component={DateInput}
                                      formitemlayout={formItemLayout}
                                      defaultValue={values.dateofbirth}
                                      format={dateFormat} 
  
                                  /&gt;
  
  
                      &lt;Button type="primary" htmlType="submit"&gt;Submit&lt;/Button&gt;
                       &lt;/Form&gt;  
   )
     }
  
  }
  </code></pre>
  
  <p>Here i am getting the values through withFormik and submitting the form using handleSubmit. Why iam not getting datepicker value and why validation message is displayed after selecting a datepicker value?</p>
  
  <pre><code> const FormikApp = (withFormik)({
          mapPropsToValues({ username, email, password, dateofbirth }) {
              return {
                  username: username || '',
                  email: email || '',
                  password: password || '',
                  dateofbirth: dateofbirth || ''
  
  
              }
          },
          validationSchema: Yup.object().shape({
              username: Yup.string()
                  .min(3, "Username must be above 3 characters")
                  .required("Username is required"),
              email: Yup.string()
                  .email("Invalid Email !!")
                  .required("Email is required"),
              password: Yup.string()
                  .min(6, "Password must be above 6 characters")
                  .required("Password is required"),
  
              dateofbirth: Yup.string().required("Date is required")
  
  
  
          }),
          handleSubmit(values, { resetForm }) {
              resetForm();
              console.log(values)
  
          }
  
      })(FormikApollo)
  </code></pre>