Enhance DatePicker input with `contenteditable` and `inputmode`

[cheton]

Refer to MUI Date Picker: https://mui.com/x/react-date-pickers/date-picker/

For the MM/DD/YYYY format, the HTML structure may look like this:

<div role="group">
  <div contenteditable="false" tabindex=0">
    <span data-sectionindex="0">
      <span aria-labelledby="«r12u»-month" aria-readonly="false" aria-valuemin="1" aria-valuemax="12" aria-valuetext="Empty" aria-label="Month" aria-disabled="false" tabindex="0" contenteditable="true" role="spinbutton" id="«r12u»-month" spellcheck="false" autocapitalize="off" autocorrect="off" inputmode="numeric">MM</span>
      <span>/</span>
    </span>
    <span data-sectionindex="1">
      <span aria-labelledby="«r12u»-day" aria-readonly="false" aria-valuemin="1" aria-valuemax="31" aria-valuetext="Empty" aria-label="Day" aria-disabled="false" tabindex="-1" contenteditable="true" role="spinbutton" id="«r12u»-day" spellcheck="false" autocapitalize="off" autocorrect="off" inputmode="numeric">DD</span>
      <span>/</span>
    </span>
    <span data-sectionindex="2">
      <span aria-labelledby="«r12u»-year" aria-readonly="false" aria-valuemin="0" aria-valuemax="9999" aria-valuetext="Empty" aria-label="Year" aria-disabled="false" tabindex="-1" contenteditable="true" role="spinbutton" id="«r12u»-year" spellcheck="false" autocapitalize="off" autocorrect="off" inputmode="numeric">YYYY</span>
      <span>/</span>
    </span>
  </div>
</div>