I recently upgraded from @mui/x-date-pickers v6 to v7, and my DateTimeField component stopped working due to a TypeScript error.

In v6, I was able to add a custom button to open the calendar using endAdornment inside slotProps.textField.InputProps, but in v7, this approach throws a TypeScript error.

Here's my component code:

<DateTimeField
  className={classes.dateTimeField}
  value={value}
  onChange={handleDateTimeFieldChange}
  format={DATE_FORMAT}
  slotProps={{
    textField: {
      error: Boolean(errorMessage),
      InputProps: {
        endAdornment: (
          <IconButton
            className={classes.openCalendarButton}
            onClick={handleOpenCalendar}
            title="Open calendar"
            size="small"
          >
            <CalendarWithClockIcon />
          </IconButton>
        ),
      },
    },
  }}
/>

This code worked fine in v6 but now results in the following TypeScript error in v7:

Type '{ className: string; value: Dayjs; onChange: (newDate: Dayjs) => void; format: string; slotProps: { textField: { error: boolean; InputProps: { endAdornment: Element; }; }; }; }' 
is not assignable to type 'Omit<Omit<FilledTextFieldProps | OutlinedTextFieldProps | StandardTextFieldProps, "select" | "type" | ... 7 more ... | "SelectProps">, keyof UseDateTimeFieldProps<...>>'.
  Types of property 'slotProps' are incompatible.
    Type '{ textField: { error: boolean; InputProps: { endAdornment: React.JSX.Element; }; }; }' 
    is not assignable to type '{ input?: SlotProps<ElementType<FilledInputProps, keyof IntrinsicElements>, {}, BaseTextFieldProps> | undefined; inputLabel?: SlotProps<...> | undefined; htmlInput?: SlotProps<...> | undefined; formHelperText?: SlotProps<...> | undefined; select?: SlotProps<...> | undefined; } | { ...; } | { ...; } | undefined'.ts(2322)

I tried different approaches, but I couldn't find a simple solution.

Question: What is the correct way to add an endAdornment button in DateTimeField in @mui/x-date-pickers v7?

Any help would be greatly appreciated!

I recently upgraded from @mui/x-date-pickers v6 to v7, and my DateTimeField component stopped working due to a TypeScript error.

In v6, I was able to add a custom button to open the calendar using endAdornment inside slotProps.textField.InputProps, but in v7, this approach throws a TypeScript error.

Here's my component code:

<DateTimeField
  className={classes.dateTimeField}
  value={value}
  onChange={handleDateTimeFieldChange}
  format={DATE_FORMAT}
  slotProps={{
    textField: {
      error: Boolean(errorMessage),
      InputProps: {
        endAdornment: (
          <IconButton
            className={classes.openCalendarButton}
            onClick={handleOpenCalendar}
            title="Open calendar"
            size="small"
          >
            <CalendarWithClockIcon />
          </IconButton>
        ),
      },
    },
  }}
/>

This code worked fine in v6 but now results in the following TypeScript error in v7:

Type '{ className: string; value: Dayjs; onChange: (newDate: Dayjs) => void; format: string; slotProps: { textField: { error: boolean; InputProps: { endAdornment: Element; }; }; }; }' 
is not assignable to type 'Omit<Omit<FilledTextFieldProps | OutlinedTextFieldProps | StandardTextFieldProps, "select" | "type" | ... 7 more ... | "SelectProps">, keyof UseDateTimeFieldProps<...>>'.
  Types of property 'slotProps' are incompatible.
    Type '{ textField: { error: boolean; InputProps: { endAdornment: React.JSX.Element; }; }; }' 
    is not assignable to type '{ input?: SlotProps<ElementType<FilledInputProps, keyof IntrinsicElements>, {}, BaseTextFieldProps> | undefined; inputLabel?: SlotProps<...> | undefined; htmlInput?: SlotProps<...> | undefined; formHelperText?: SlotProps<...> | undefined; select?: SlotProps<...> | undefined; } | { ...; } | { ...; } | undefined'.ts(2322)

I tried different approaches, but I couldn't find a simple solution.

Question: What is the correct way to add an endAdornment button in DateTimeField in @mui/x-date-pickers v7?

Any help would be greatly appreciated!

• reactjs
• mui-x-data-grid
• mui-x-date-picker

1 Answer 1

In @mui/x-date-pickers v7, the slotProps.textField.InputProps prop is deprecated. You can use slots.textfield prop instead. Check the example below