reactjs - How to add endAdornment button in DateTimeField after migrating to @muix-date-pickers v7? - Stack Overflow

admin管理员组

文章数量:1390949

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

Share Improve this question Follow edited Mar 18 at 0:16 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Mar 14 at 21:46 Калдар КайратКалдар Кайрат 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

本文标签： reactjsHow to add endAdornment button in DateTimeField after migrating to muixdatepickers v7Stack Overflow