问如何清除MUI DatePicker输入？

EN

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

• 当存在有效值(如初始的DatePicker )时，首先成功地重置状态(value=null，inputValue='')。
• 输入一些无效的日期。现在这个州(value=Invalid Date，inputValue='invalid Text')
• 因为当前的value无效，所以它不计数，DatePicker引用最后一个有效值，即null，然后决定当前值不改变，跳过分配新的输入值(value=null，inputValue='invalid Text')。

我把它归类为MUI中的一个bug，如果您想要修复它，可以在github上创建一个问题。同时，您可以通过使用补丁使用patch-package来修复这个错误。

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

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

• 在node_modules\@mui\lab\internal\pickers\hooks\useMaskedInput.js中打开buggy文件，并根据这提交来更改它。
• 运行npx patch-package @mui/lab以创建每次运行npm i @mui/lab后都要应用的修补程序。
• 重新启动开发服务器。

梅DatePicker具有清晰的属性。当设置为true时，它会显示一个清晰的按钮。可以使用clearText属性更改clear按钮的文本。但是，我要指出，它不触发onChange事件，也不存在onClear事件(在撰写本文时)。所以当我使用它时，不可能这样改变状态。但是会触发onAccept事件，如果您传递值参数，它将为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);
                  }
                }}
              />