[Datepicker] [Timepicker] Can't override placeholder text due to input format

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Passing placeholder to renderInput does not do anything due to input format.

Expected Behavior 🤔

Placeholder on renderInput should be passed to input, rather than input format if placeholder is passed.

Steps to Reproduce 🕹

    <TimePicker
        renderInput={props => (
          <TextField
            {...props}
            helperText="override works today"
            placeholder="override does nothing"
          />
        )}
        label={'Label'}
        // This is forced placeholder text
        inputFormat={'h:mm a'}
      />

[Aeon-Industries]

@sherlock2017

Still, this isn’t working, can anyone help!

This appears to be the correct way of doing it. Date/time pickers put the placeholder directly into inputProps - attributes applied to the input element (not to be confused with InputProps, which are Input component props), so we have to override that.

<LocalizationProvider dateAdapter={AdapterDateFns} style={{ width: "40px" }}>
  <TimePicker
    value={time}
    onChange={setTime}
    renderInput={({ inputProps, ...restParams }) => (
      <TextField
        {...restParams}
        inputProps={{
          ...inputProps,
          placeholder: "Add Class Time",
        }}
        style={{ width: "198px" }}
      />
    )}
  />
</LocalizationProvider>

Posting for clarification since the approach is somewhat counter-intuitive, and the first post example is misleading.

[sherlock2017]

<LocalizationProvider dateAdapter={AdapterDateFns} style={{ width: "40px" }} > <TimePicker value={time} onChange={setTime} renderInput={(params) => ( <TextField placeholder="Add Class Time" {...params} style={{ width: "198px" }} /> )} /> </LocalizationProvider>

Still, this isn’t working, can anyone help!