如何本地化 MUI(v5) 日期选择器输入或设置占位符

【问题标题】：How to localize MUI(v5) date picker input or set a placeholder如何本地化 MUI(v5) 日期选择器输入或设置占位符
【发布时间】：2021-12-23 01:00:03
【问题描述】：

我必须使用 MUI5 DesktopDatePicker，如此处https://mui.com/components/pickers/#react-components 手册中所示。

当我清除所选日期时，我看到 dd/mm/yyyy 作为占位符作为 DatePicker 的输入格式。我想查看基于本地化集的占位符，例如gg/mm/aaaa 用于意大利语言环境。这可能吗？甚至设置自定义占位符？

这是一个直接从 MUI5 演示分叉的沙盒。

https://codesandbox.io/s/desktopdatepicker-jfqk7

【问题讨论】：

标签： reactjs datepicker material-ui

【解决方案1】：

您必须在不覆盖 params.inputsProps 上的数据的情况下更改 renderInput 上文本字段的占位符。这将是您的新 DesktopDatePicker。

<DesktopDatePicker
      label="Date desktop"
      inputFormat="dd/MM/yyyy"
      value={value}
      onChange={handleChange}
      renderInput={(params) => (
        <TextField
          {...params}
          inputProps={
            { 
              ...params.inputsProps, 
              placeholder: "dd/mm/aaaa" 
            }
          }
        />
      )}
    />

这是固定 CodeSandBox 示例的链接，日期选择器组件在 demo.js 上

【讨论】：

感谢您的回答！使用您的代码占位符有效，但不是日历中的日期选择，我在您的代码的 inputProps 中提交了一个小编辑。
@200Matteo 我已链接到固定代码框示例。如果您放置 inputProps 而不引用它是 params 的属性，则应用程序崩溃。