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

Asclepiadaceous

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. – Alleras

@HåkenLid You can check the sandbox example it works for: "dd.mm.yyyy" – Asclepiadaceous

@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 – Asclepiadaceous

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

Bawdyhouse

Have you found a way to add this to MuiDatePicker theme? – Geomorphology

Thanks a lot, working on September 22. – Jeffrey

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

Hat

Answer 3

  <TextField
      type="date"
      label="End Date"
      InputLabelProps={{ shrink: true }}
       />

type="date" label="your label "

    <TextField
        type="date"
        label="End Date"
        InputLabelProps={{ shrink: true }}
        name="selectedendDate"
        {...register("selectedendDate", {
          required: "End Date is required.",
           validate: (value) =>
            value >= getValues("selectedstartDate"),
         message: "End Date Must be Less Then Start Date..",
             })}                     
           error={Boolean(errors.selectedendDate)}
           helperText={errors.selectedendDate?.message}
           FormHelperTextProps={helperTextFontSize}
                />

Gristle

Answer 4

 <Select
          value={priority}
          label="Priority"
          InputLabelProps={{ shrink: true }}
   />


    <FormControl>
                <InputLabel
                  error={Boolean(errors.priority)}
                  helperText={errors.priority?.message}
                >
                  Priority
                </InputLabel>
                <Select
                  value={priority}
                  label="Priority"
                  InputLabelProps={{ shrink: true }}
                  onChange={(e) => {
                    setPriority(e.target.value);
                  }}
                  name="priority"
                  inputProps={register("priority", {
                    required: "Story Priority is required.",
                  })}
                  error={Boolean(errors.priority)}
                  helperText={"Hello " + errors.priority?.message}
                >
                  {prioritys.map((resp) => (
                    <MenuItem value={resp}>{resp}</MenuItem>
                  ))}
                </Select>
                <FormHelperText
                  style={{ fontSize: fontSizeMessage }}
                  error={Boolean(errors.priority)}
                >
                  {errors.priority?.message}
                </FormHelperText>
              </FormControl>

Gristle