KeyboardDatePicker MaterialUI - 自定义掩码格式

问题描述

当使用 Material UI 的 KeyboardDatePicker 时，当格式为 dd/MMM/yyyy（例如 26/Apr/1983）时，它不允许用户输入字母。我将如何创建掩码以创建自定义格式？

到目前为止，我的尝试是这样的：

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

解决方法

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

/>