如何设置MUI DatePicker的占位符文本？

Question

如何设置 MUI 的占位符文本DatePicker。删除输入字段中的文本时显示的文本。我想将文本设置为"tt.mm.jjjj"，但总是出现以下错误消息：

Format string contains an unescaped latin alphabet character `j`

沙盒

<DatePicker
  inputFormat="tt.mm.jjjj"
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField placeholder="tt.mm.jjjj" {...params} />}
  />

Answer 1

这是重置 .txt 文件内部占位符的TextField方法DatePicker。它不起作用的原因是因为它被基于以下内容的自身params.inputProps提供的覆盖：DatePickerinputFormat

<DatePicker
  {...}
  inputFormat="tt.mm.yyyy"
  renderInput={(params) => {
    console.log(params);
    return (
      <TextField
        {...params}
        inputProps={{
          ...params.inputProps,
          placeholder: "tt.mm.jjjj"
        }}
      />
    );
  }}
/>

Answer 2

如果您不需要自定义TextField，您可以只使用slotProps属性来设置占位符值。

<DatePicker
        format="tt.mm.yyyy"
        label="Basic example"
        value={value}
        onChange={setValue}
        slotProps={{ textField: { placeholder: 'tt.mm.jjjj' } }}