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

Question

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

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

这是直接从 MUI5 演示分叉的沙箱。

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

Answer 1

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

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

这是固定 CodeSandBox 示例的链接，DatePicker 组件位于 demo.js 上