CODEWITHSUNDEEP
reactjsmui-x-date-picker
dilusha_dasanayaka
dilusha_dasanayaka

Reputation: 1441

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.

Upvotes: 2

Views: 11125

Answers (2)

Ali Onar
Ali Onar

Reputation: 11

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()}
/>

Upvotes: 0

Pluto
Pluto

Reputation: 5095

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

Upvotes: 5

Related Questions