KeyboardDatePicker MaterialUI - 自定義遮罩格式

Question

使用 Material UI 的 KeyboardDatePicker 時，當格式為 dd/MMM/yyyy（例如 1983 年 4 月 26 日）時，它不允許用戶輸入字母。 我將如何創建掩碼來創建自定義格式？

到目前為止，我的嘗試是這樣的：

<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

掩碼只能接受string ，因此在您的情況下，正則表達式數組將不起作用。

還有另一個名為reject 的標志可用於refuse輸入中的模式。 我們可以利用它來允許字母輸入。

這是代碼框：

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()}

/>