CODEWITHSUNDEEP
reactjsmaterial-uimui-xmui-x-date-picker
dave_bell
dave_bell

Reputation: 191

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)

Upvotes: 8

Views: 11408

Answers (2)

Reed Dunkle
Reed Dunkle

Reputation: 3597

What version of MUI X are you using?

I don't see the renderInput prop listed on the <DatePicker> API: https://mui.com/x/api/date-pickers/date-picker/

It looks like in the most recent version, 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 component might be the one you're looking to target.

Note that there is also a slotProps prop:

<DatePicker
  {...otherProps}
  slots={{
    // Override default <ActionBar /> with a custom one
    actionBar: CustomActionBar,
  }}
  slotProps={{
    // pass props `actions={['clear']}` to the actionBar slot
    actionBar: { actions: ['clear'] },
  }}
/>

If this doesn't get you where you're heading, can you share the sandbox that shows the working example you've referenced, in addition to your MUI version?

Upvotes: 8

Anastasiya Stanevich
Anastasiya Stanevich

Reputation: 346

renderInput is the prop used in @mui/x-date-pickers v5 and since v6 were launched it's replaced with customization through slots. So, equivalent to renderInput in a new version is:

<DatePicker
  {...props}
  slots={{
    textField: textFieldProps => <CustomTextField {...textFieldProps} />
  }}
/>

Upvotes: 7

Related Questions