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

Where did you import `DatePicker`? Did you check if there's any documentation of what the `inputFormat` prop should be? It seems more likely that it's inputFormat and not placeholder that causes this error. — Håken Lid, Oct 11 '21 at 11:35
@HåkenLid You can check the sandbox example it works for: "dd.mm.yyyy" — vuvu, Oct 11 '21 at 11:38
@BENARDPatrick My Question is "How can I set the placeholder text of the mui datepicker." So how can set the text that is shown, when the input is empty? I need a it in the german language: tt.mm.jjjj — vuvu, Oct 11 '21 at 11:45

score 24 · Accepted Answer · answered Oct 11 '21 at 11:48

24

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"
        }}
      />
    );
  }}
/>

answered Oct 11 '21 at 11:48

NearHuscarl

66,950
18
261
230

Have you found a way to add this to MuiDatePicker theme? – Remy Feb 11 '22 at 15:16
1

Thanks a lot, working on September 22. – Josh Rodríguez Sep 28 '22 at 10:02

score 1 · Answer 2 · answered Jul 01 '23 at 12:02

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

How to set the placeholder text of the MUI DatePicker?

2 Answers2

Linked