如何在 Material-UI V5 (@mui/lab) datepicker 组件上设置一个空标签？

Posted 2023-02-22

【中文标题】如何在 Material-UI V5 (@mui/lab) datepicker 组件上设置一个空标签？

【英文标题】：How to set an empty label on Material-UI V5 (@mui/lab) datepicker component?

【发布时间】：2021-12-17 06:11:24

【问题描述】：

我正在将material-ui v4 迁移到MUI v5，并且我正在使用material-ui-pickers。

我阅读了迁移指南：https://mui.com/guides/pickers-migration/ 和文档，但我在emptyLabel 中找不到和等效的emptyLabel 功能https://material-ui-pickers.dev/api/KeyboardDatePicker

emptyLabel material-ui-pickers允许您设置自定义文本，显示在选择器上的值设置为null。

这是MUI 的日期选择器中缺少的功能还是我缺少什么？

【参考方案1】：

KeyboardDatePicker 不再维护，现在作为 DatePicker 成为 MUI v5 中实验室组件的一部分（如迁移指南中所述）。

实际上DatePicker 没有“emptyLabel”道具，但您可以使用label 道具并检查您提供给DatePicker 的value 来实现相同的效果：

<DatePicker
  label=value === null ? "null value!" : "placeholder"
  value=value
  onChange=(newValue) => 
    setValue(newValue);
  
  renderInput=(params) => <TextField ...params />
/>

see example here

【讨论】：

谢谢，但这并不能解决我的问题。我需要在值所在的位置放置一个自定义字符串，而不是标签。故意删除这样的功能会很奇怪，所以我的猜测是它要么丢失，要么没有记录如何实现这一点。

我在sources 中没有找到与此类道具相关的任何内容，因此您的第一个猜测是正确的，但是为什么无法通过像value=value || emptyLabelValue 这样的简单检查来重现此行为？

这是个好问题。我试过了，但 material-ui-pickers 和 MUI 中的最新版本都不可能。如果您传递一个字符串，它不会显示出来。我猜它验证了将日期作为值，如果不是，则将其忽略。