[SOLVED] Use my own custom input in mui x datepicker

Use my own custom input in mui x datepicker

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.

Solution

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