title: How can use material UI Pickers KeyboardDatePicker with DD/MMM/YYYY format or with a custom input field
body: <p>Currently my datepicker looks like this</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import {
    KeyboardDatePicker,
    MuiPickersUtilsProvider
  } from &quot;@material-ui/pickers&quot;;
  import MomentUtils from &quot;@date-io/moment&quot;;
  function KeyboardDatePickerExample(props) {
    const [selectedDate, handleDateChange] = useState(new Date());
  
    return (
      &lt;MuiPickersUtilsProvider utils={MomentUtils}&gt;
        &lt;KeyboardDatePicker
          value={selectedDate}
          onChange={(date) =&gt; handleDateChange(date)}
          format=&quot;DD/MMM/YYYY&quot;
        /&gt;
      &lt;/MuiPickersUtilsProvider&gt;
    );
  }
  
  export default KeyboardDatePickerExample;
  </code></pre>
  <p>However, when I try to type the date, it is only numbers so it looks like 00/000/0000 instead of 00/Dec/0000.</p>
  <p>So I was wondering if there is a way to fix this, or use my own input field.</p>
  <p><a href="https://codesandbox.io/s/objective-goodall-7bn71" rel="nofollow noreferrer">https://codesandbox.io/s/objective-goodall-7bn71</a></p>