如何清除 MUI DatePicker 输入？

Question

我想将 'clear' 按钮添加到 @mui/lab (5.0.0-alpha.55) 的 DatePicker。

我正在尝试的是：

在状态中存储一个 date 字段，作为 value 属性传递给 DatePicker
根据需要将 date 更改为 null 到 'clear' 值并输入

我观察到的行为：

如果date有效，则按预期工作，输入被清除
如果date无效，则error被清除，但无效日期仍保留在输入中。

可以看到我尝试的显示上述行为的基本版本 here。

如果你输入了部分日期，然后点击clear，你可以观察到输入没有被清除。

我宁愿避免涉及更改 key 的解决方案，因为这会带来其他问题，例如不考虑将 date 更改为 null 的外部来源，以及在清除输入时需要额外的技巧来尊重 label 转换。

Answer 1

我的理论是，在内部，DatePicker 仅在输入值与上一个 valid 值不同时更新输入值。以下是错误的发生方式：

当有有效值时清除DatePicker（如初始Date），状态首先重置成功（value=null，inputValue=''）
您输入的日期无效。现在的状态是 (value=Invalid Date, inputValue='invalid Text')
因为当前的value是无效的，所以不算，而DatePicker引用的是最后一个有效值，而不是null，那么判断当前值不算更改并跳过调度新输入值 (value=null, inputValue='invalid Text').

我将其归类为 MUI 的错误，您可以创建一个 issue on github if you want it to be fixed. In the meanwhile, you can fix the bug by applying this patch using patch-package:

安装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 之后每次应用的补丁。
重新启动您的开发服务器。

Answer 2

MUI DatePicker 有一个可清除的属性。当设置为 true 时，它显示一个清除按钮。您可以使用 clearText 属性更改清除按钮的文本。但是，我要指出的是，它不会触发 onChange 事件，也不会触发 onClear 事件（在撰写本文时 post）。所以当我使用它时，不可能那样改变状态。然而 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/

Answer 3

这就是我为清除功能所做的工作。我最近找到了这个解决方案，所以我可能会在未来改变它......但现在它很好。

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

如何清除 MUI DatePicker 输入？

How can I clear MUI DatePicker input?

datepicker

reactjs

material-ui