KeyboardDatePicker MaterialUI - 自定义掩码格式

Question

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

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

<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 只能接受 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()}

/>

KeyboardDatePicker MaterialUI - 自定义掩码格式

KeyboardDatePicker MaterialUI - custom mask format

reactjs

forms

material-ui

mask

date-formatting