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

【问题标题】：How to set the placeholder text of the MUI DatePicker?如何设置 MUI DatePicker 的占位符文本？
【发布时间】：2021-11-30 03:53:17
【问题描述】：

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

Format string contains an unescaped latin alphabet character `j`

Sandbox

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

【问题讨论】：

你在哪里导入DatePicker？您是否检查过是否有任何关于 inputFormat 道具应该是什么的文档？似乎更有可能是导致此错误的 inputFormat 而不是占位符。
@HåkenLid 您可以查看它适用于的沙盒示例：“dd.mm.yyyy”
@BENARDPatrick 我的问题是“如何设置 mui 日期选择器的占位符文本。”那么当输入为空时，如何设置显示的文本呢？我需要德语的它：tt.mm.jjjj

标签： reactjs material-ui date-fns

【解决方案1】：

这是您在DatePicker 中重置TextField 占位符的方法。它不起作用的原因是它被DatePicker本身基于inputFormat提供的params.inputProps覆盖：

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

【讨论】：