material-uimui-xmui-x-date-picker

How do I add a Start Adornment to MUI X v6 DateTimePicker without render Input


Previously (MUI X v5), I could do this in my DateTimePicker:

    renderInput={(params) => {
      const inputProps = params.InputProps;
      if (inputProps && stopDateKey) {
        inputProps.startAdornment = <Stack direction='row' marginRight={1}>{mapDateFieldToIcon[stopDateKey]}</Stack>;
      }

      return <TextField {...params} error={error} helperText={helperText} fullWidth InputProps={inputProps} />
    }}

Now (MUI X v6), I am trying to do this but the startAdornment isn't showing up:

    slotProps={{
      textField: {
        error: error,
        helperText: helperText,
        fullWidth: true,
        inputProps: {
          startAdornment: (<Stack direction='row' marginRight={1}>{mapDateFieldToIcon[stopDateKey]}</Stack>),
        },
      },
    }}

not sure what I'm missing!


Solution

  • You can add adornments to MUI's DatePicker or DateTimePicker field components this way:

    <DateTimePicker
      // ...
      slotProps={
        textField: {
          InputProps: {
            startAdornment: (
              // Your adornment code, like an icon
            ),
          },
        }
      }
    />
    

    I guess your error was to use small caps for the InputProps property.