Use my own custom input in mui x datepicker

Question

I want to allow my users to enter their birthday either by picking it from the date picker or entering the value manually on the input field on a form. For that, I'm using mui-x-datepicker (version 6.9.2) package. But i'm unable to find a way to use my own TextField component as the input. For older mui-pickers we can use renderInput property, but it seems like new mui-x-picker wont support renderInput. Can anyone help me to do it using slots property of date picker.

Answer 1

You can use slot props in date picker.

For example:

<DateTimePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  format="YYYY-MM-DD"
  views={["year", "month", "day"]}
  slots={{
    textField: (params) => <TextField variant='filled' {...params} />
  }}
/>

Please see: https://codesandbox.io/s/cocky-rumple-yz8rtx?file=/demo.js

Answer 2

Use slot props and CustomTextField. Like this:

function CustomTextField(params: TextFieldProps) {
    return (
        <TextField size="small" {...params} />
    );
}

<DateTimePicker
    label="Date / Time"
    value={dayjs(value)}
    onChange={(newValue) => setValue(newValue)}
    slots={{ textField: CustomTextField }}
    maxDate={dayjs()}
/>