reactjs - Material UI KeyboardDatePicker 中的覆盖格式

Question

我正在尝试使用掩码覆盖 Mui Datepicker 提供的默认格式（当前默认为“ / /____”），但如果我使用掩码，代码不会让我输入任何内容？

 <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          data-testid={props.name}
          className={styles.DateValueField}
          margin="normal"
          mask = {"/\d/, /\d/, ' / ', /\d/, /\d/, ' / ', /\d/, /\d/"}
          format="dd / MM / yy"
          value={dateValue}
          onChange={dateSelected}
          placeholder={"DD / MM / YY"}
          variant={"inline"}
          disableToolbar
          autoOk 
        />
</MuiPickersUtilsProvider>

标签： reactjsmaterial-ui

Answer 1

掩码将根据传递的格式自动生成和应用。因此，请确保您的格式易于从键盘输入。并且仍然可以完全自定义掩码，查看此示例：

<KeyboardDatePicker
  format="dd/MM/yyyy"
- mask={[/d/, /d/, "/", /d/, /d/, "/", /d/, /d/, /d/, /d/]}
/>

如果您查看 DatePicker API，您会发现没有 mask 属性，因此您必须使用 format 属性。