title: Material-UI date picker component not working properly on Safari
body: <p>I am building a React app and using a <code>material-ui-pickers</code> Date Picker component inside a custom component that also uses <code>formik</code> form, and <code>yup</code> for validation.
  The component is working fine on different browsers, but is giving me both the errors from inside the component (using the formik+yup validation) and the built in invalidDateMessage attribute of the Date Picker component when on Safari.
  The reason I believe the issue has something to do with the material-ui-pickers Date Picker is that in the form i have other Material-UI fields, all working fine on all browsers.</p>
  <p>I tried looking up similiar issues but haven't found any, also playing around with the validation (changing date() to string()) did not work.</p>
  <p>I am playing around with the value on change to be able to get a string out of the date, but without it the component won't work at all so I assume this is not the issue.</p>
  <p>The component:</p>
  <pre><code>import moment from &quot;moment&quot;;
  import MomentUtils from &quot;@date-io/moment&quot;;
  import React from &quot;react&quot;;
  import { FormHelperText } from &quot;@material-ui/core&quot;;
  import { Field, ErrorMessage } from &quot;formik&quot;;
  import { DatePicker, MuiPickersUtilsProvider } from &quot;@material-ui/pickers&quot;;
  
  const FormikDatePicker = ({
      name,
      label,
      disablePast = false,
      disableFuture = false,
      ongoing = false,
      disableEnd = false,
  }) =&gt; {
      const convertDateToString = (d) =&gt; {
          return d.format(&quot;MM-DD-YYYY&quot;);
      };
  
      return (
          &lt;Field name={name}&gt;
              {({ form, field, meta }) =&gt; {
                  return (
                      &lt;MuiPickersUtilsProvider utils={MomentUtils}&gt;
                          &lt;DatePicker
                              id={name}
                              disableFuture={disableFuture}
                              disablePast={disablePast}
                              label={label}
                              value={form.values[name]}
                              disabled={ongoing &amp;&amp; disableEnd}
                              onChange={(v) =&gt;
                                  form.setFieldValue(name, convertDateToString(v))
                              }
                              onBlur={field.onBlur}
                              fullWidth
                              disableToolbar
                              autoOk
                              openTo=&quot;year&quot;
                              format=&quot;DD/MM/yyyy&quot;
                              views={[&quot;year&quot;, &quot;month&quot;, &quot;date&quot;]}
                              variant=&quot;inline&quot;
                              inputVariant=&quot;outlined&quot;
                              error={!!(meta.touched &amp;&amp; meta.error)}
                              
                              invalidDateMessage=&quot;this is the built in error&quot;
                          /&gt;
                          &lt;ErrorMessage name={name}&gt;
                              {(error) =&gt; {
                                  return (
                                      &lt;FormHelperText style={{ color: &quot;red&quot; }}&gt;
                                          Required field.
                                      &lt;/FormHelperText&gt;
                                  );
                              }}
                          &lt;/ErrorMessage&gt;
                      &lt;/MuiPickersUtilsProvider&gt;
                  );
              }}
          &lt;/Field&gt;
      );
  };
  
  export default FormikDatePicker;
  </code></pre>
  <p>Yup validation:</p>
  <pre><code>export const pageThree = object({
      &quot;Country of residence&quot;: string(&quot;Please enter a valid country name.&quot;)
          .min(2, &quot;Required field.&quot;)
          .required(&quot;Required field.&quot;),
      &quot;City of residence&quot;: string(&quot;Please enter a valid city name.&quot;)
          .min(2, &quot;Required field.&quot;)
          .required(&quot;Required field.&quot;),
      Nationality: string(&quot;Please enter a valid value.&quot;).required(
          &quot;Required field.&quot;
      ),
      &quot;Date of Birth&quot;: date(&quot;Required field.&quot;).required(&quot;Required field.&quot;),
  });
  </code></pre>