How to set the placeholder text of the MUI DatePicker?

Question

How can I set the placeholder text of the MUI DatePicker. The text that is displayed when deleting the text in the input field. I want to set the text to "tt.mm.jjjj" and I always the following error message:

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} />}
  />

Answer 1

This is how you reset the placeholder of the TextField inside the DatePicker. The reason it doesn't work is because it is overridden by the params.inputProps provided by the DatePicker itself based on the inputFormat:

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

Answer 2

If you don't need to customize TextField, You can just use slotProps attribute to set the placehoder value.

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