如何清除 Material UI DatePicker 输入？

Question

我想在DatePickerfrom @mui/lab(5.0.0-alpha.55) 中添加一个“清除”按钮。

我正在尝试什么：

• 在 state 中存储一个date字段，作为valueprop 传递给DatePicker
• 当需要“清除”值和输入时将其更改date为null

我观察到的行为：

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

我尝试过的显示上述行为的基本版本可以在此处看到。

如果您输入了部分日期，然后单击clear，您可以观察到输入的内容没有被清除。

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

Answer 1

对于@mui/x-date-pickersv5 你可以这样做：

<DatePicker
  componentsProps={{
    actionBar: {
      actions: ['clear'],
    },
  }}
  onAccept={(newDate) => {
    console.log(newDate);
  }}
/>

看看是否newDate是null。

重要更新：

1. 为了@mui/x-date-pickersv6 请参阅其他评论
2. 默认情况下，移动设备和桌面设备不具有相同的行为，仅指定clear将使用户停留在移动设备上。考虑['clear', 'accept']针对移动设备和['clear']桌面设备，或更简单地，通过使用属性closeOnSelect={true|false}在两个平台上强制合并行为。

Answer 2

作为Thomas 答案的扩展，如果您使用的是 MUI 5，则可以传递clear给：slotProps

<MobileDatePicker
  ...
  slotProps={{
    actionBar: {
      actions: ['clear']
    }
  }}
  ...
/>

参考：

• https://mui.com/x/api/date-pickers/date-picker/#slots
• https://mui.com/x/api/date-pickers/pickers-action-bar/#props

Answer 3

我的理论是，在内部，仅当输入值与最后一个有效值DatePicker不同时才更新输入值。以下是该错误的发生方式：

• DatePicker当有有效值（如初始值）时，您清除Date，状态首先成功重置（value=null, inputValue=''）
• 您输入了一些无效日期。现在的状态是 ( value=Invalid Date, inputValue='invalid Text')
• 由于当前值value无效，因此不会计数，并且会DatePicker引用最后一个有效值，即null，然后确定当前值不会更改并跳过分派新输入值 ( value=null, inputValue='invalid Text')。

我将其归类为 MUI 中的错误，如果您希望修复它，可以在 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并根据此提交更改它。
• 运行npx patch-package @mui/lab以创建每次再次运行后都会应用的补丁npm i @mui/lab。
• 重新启动您的开发服务器。

Answer 4

@mui/x-date-pickers软件包版本v6.16.0现在内置了此功能：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';

<DatePicker
   slotProps={{ field: { clearable: true } }}
/>

来源： https: //github.com/mui/mui-x/releases/tag/v6.16.0