reactjsmaterial-uimui-x-date-picker

renderInput error while using <DatePicker> from MUI X


I am using the below for <DatePicker>. Saw a lot of videos and sandbox where it works fine.

Not sure why I am getting the below error on renderInput

<DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={(newValue) => { setSelectedDate(newValue) }}
        renderInput={(props) => <TextField {...props} />}
      />
Type '{ label: string; value: Date; onChange: (newValue: Date) => void; renderInput: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.
  Property 'renderInput' does not exist on type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.ts(2322)

Solution

  • Your renderInput seems to be from MUI v5. It's not on current <DatePicker> API: https://mui.com/x/api/date-pickers/date-picker/

    For MUI v6 and v7, the slots prop should be used to customize the internal HTML components: https://mui.com/x/api/date-pickers/date-picker/#slots

    See here for more information: https://mui.com/x/react-date-pickers/custom-components/#overriding-components

    Specifically, the textField slot might be the one you want?

    Note that there is also a slotProps prop, to pass through to textField in this example:

    <DatePicker
      {...otherProps}
      slots={{
        // Override default <TextField /> with a custom one
        textField: CustomTextField,
      }}
      slotProps={{
        // Pass props `variant={"filled"}` to the `textField` slot
        textField: { variant: "filled" },
      }}
    />