Material-ui-pickers: Need an attribute to disable the component

[jeebb]

Hi,

I see that there is no built-in attribute like 'disabled' for greying out a component and not allow user to input. Could you please consider adding support for this ?

At this time, to enable/disable a date picker, I have to do something like this:

label={label}
invalidLabel=''
disableFuture={true}
InputProps={{
disabled: isDisabled,
onClick: (event: any) => {
// In the current impl of the DatePicker, event when a textfield is disabled, the onClick
// is not prevent. Therefore, the calendar still display
// I added this to make sure that the calendar is not display :P
if (event.target.disabled) {
event.stopPropagation();
}
}
}}
onChange={onChange}
value={value} />

If there is already a way to implement the same thing, please let me know :)

Thanks,
Duy

[dmtrKovalenko]

It is actually the bug we should fix asap. Thx for opening this issue

[dmtrKovalenko]

Seems like I didnt understand your point. Everything works just pass disabled prop

[breacons]

I was also a bit confused when I wanted to disable the field. I looked up the documentation, where I found different disabling props, but the simple disable prop is missing from the documentation. Although it works perfectly.

[dmtrKovalenko]

It says that any props will pass any not recognized props to material ui TextField. So any material ui prop will work with pickers

[tafelito]

if disabled=true the picker is grayed out but you can still click on it and select a new date/time. Same thing if readOnly=true

[denyo]

@tafelito I noticed the same with the latest version today.

"@material-ui/core": "^4.0.0-beta.1",
"@material-ui/pickers": "^3.0.0-beta.1",

However you can work around it by controlling the open flag yourself. See https://material-ui-pickers.dev/guides/controlling-programmatically.

So to sum it up.
Current behavior without the controlled approach is that the field is disabled and greyed out. But when you click it the popup still appears. At least with the following config

<DatePicker variant="inline" disabled />