KeyboardDatePicker MaterialUI - custom mask format

Question

When using Material UI's KeyboardDatePicker it doesn't allow users to input letters when the format is dd/MMM/yyyy (ex. 26/Apr/1983). How would I create a mask to create a custom format?

My attempt so far has been something like this:

<KeyboardDatePicker
    mask={[
      /\d/,
      /\d/,
      "/",
      /[a-zA-Z]/,
      /[a-zA-Z]/,
      /[a-zA-Z]/,
      "/",
      /\d/,
      /\d/
    ]}
    format="dd/MMM/yyyy"
    placeholder="DD/MMM/YYYY"
    label="Date of birth"
    openTo="year"
    views={["year", "month", "date"]}
    value={selectedDate}
  />

Answer 1

Mask can accept string only so in your case, the regex array will not work.

There is another flag called refuse which can be used to refuse the pattern in the input. We can make use of it to allow alphabetic input.

Here is the codesandbox:

https://codesandbox.io/s/material-ui-pickers-keyboard-birthdate-forked-hmtgv?file=/src/index.js

const refusePattern = () => {
    return /[^a-zA-Z0-9]+/gi; //reject the pattern which is not a-z, A-Z and 0-9
};

<KeyboardDatePicker
   ...
   refuse={refusePattern()}

/>