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)
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?