Material UI KeyboardDatePicker首次直接输入日期不遵循格式问题

这个异常是因为组件初始化时绑定的value值为undefined（Formik初始未赋值时的默认状态），导致KeyboardDatePicker内部的日期格式化校验逻辑未正常触发。首次从日历面板选择日期后，value被赋值为合法Date类型，格式化逻辑完成挂载，后续手动输入就可以正常识别格式规则。

你可以按照以下步骤修改代码解决问题：

• 第一步：Formik初始化时给dob字段显式设置初始值为null，不要留为默认的undefined
• 第二步：给KeyboardDatePicker组件添加mask属性，和你指定的format格式匹配，强制手动输入时的格式校验
• 第三步：调整handleChangeDate回调逻辑，兼容空值场景的回传处理

修改后的参考代码如下：

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <Grid container justifyContent="space-around">
    <KeyboardDatePicker
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      mask="__/__/____"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value={formik.values.dob}
      onChange={handleChangeDate}
      KeyboardButtonProps={{
        "aria-label": "change date"
      }}
    />
  </Grid>
</MuiPickersUtilsProvider>

同时确认Formik的初始值配置：

const formik = useFormik({
  initialValues: {
    dob: null,
    // 其余字段配置
  },
  // 其余Formik配置
})

内容的提问来源于stack exchange，提问作者user12302978