KeyboardDatePicker MaterialUI - 自定义遮罩格式

【问题标题】：KeyboardDatePicker MaterialUI - custom mask formatKeyboardDatePicker MaterialUI - 自定义遮罩格式
【发布时间】：2021-05-14 04:12:55
【问题描述】：

使用 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}
  />

【问题讨论】：

标签： reactjs forms material-ui mask date-formatting

【解决方案1】：

Mask 只能接受 string，因此在您的情况下，正则表达式数组将不起作用。

还有另一个名为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()}

/>

【讨论】：