材质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>

Answer 1

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

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

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