我的理论是，在内部，DatePicker只在输入值与上一个 valid 值不同时才更新输入值。下面是错误发生的原因：

• 当存在有效值（如初始Date）时，清除DatePicker，状态首先成功复位（value=null、inputValue=''）
• 您输入了无效的日期。省/自治区/直辖市现在是（value=Invalid Date，inputValue='invalid Text'）
• 因为当前value无效，所以它不计数，并且DatePicker引用最后一个有效值，即null，然后确定当前值不改变并且跳过分派新输入值（value=null，inputValue='invalid Text'）。

我认为这是一个来自MUI的bug，如果你想修复这个bug，你可以在github上创建一个issue。同时，你可以通过使用patch-package来修复这个bug：

• 安装patch-package：npm i patch-package
• 在package.json中添加postinstall脚本

"scripts": {
  "postinstall": "patch-package"
}

• 打开node_modules\@mui\lab\internal\pickers\hooks\useMaskedInput.js处的错误文件，并根据this提交对其进行更改。
• 运行npx patch-package @mui/lab以创建每次再次运行npm i @mui/lab后将应用的修补程序。
• 重新启动开发服务器。

这个自定义组件怎么样？

const DatePickerClear = (props) => {
  const { onClear } = props;
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        {...props}
        renderInput={(params) => (
          <div style={{ position: "relative", display: "inline-block" }} >
            <TextField {...params} />
            {props.value &&
              <IconButton style={{ position: "absolute", top: ".5rem", margin: "auto", right: "2rem" }} onClick={() => onClear()}>
                <ClearIcon />
              </IconButton>
            }
          </div>
        )
        }
      /></LocalizationProvider >
  )
}

export default DatePickerClear

我也给予你一个github基本项目在react。

https://github.com/HastaCs/MUI_DatePicker_ClearButton

MUI DatePicker有一个clearable属性。当设置为true时，它会显示一个清除按钮。您可以使用clearText属性更改清除按钮的文本。但是，我要指出的是，它不会触发onChange事件，也没有onClear事件（在写这篇文章的时候）。所以当我使用它的时候，不可能那样改变状态。但是onAccept事件被激发了，并且如果您传递value参数，它将为null。

<MobileDatePicker
  open
  clearable
  label="some label"
  inputFormat="yyyy-MM-dd"
  value={stateDate}
  onChange={(date) => updateAvailableDate(date)}
  renderInput={(params) => (
    <TextField
      {...params}
    />
  )}
  onClose={() => hideModal()}
  clearText="Clear me"
  onAccept={(value) => handleSave(value)}
/>

在此查看所有API设置。https://mui.com/api/date-picker/

这是我做了什么，使清除功能的工作。我最近发现了这个解决方案，所以我可能会改变这在未来...但现在它的罚款。

<MobileDateTimePicker
                ...
                clearable
                clearText="Clear"
                onChange={(newScheduleDateTime) => {
                  if (newScheduleDateTime) {
                    setScheduleDateTime(newScheduleDateTime);
                  } else {
                    setScheduleDateTime(null);
                  }
                }}
              />