CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Martin TT
Martin TT

Reputation: 311

How can disable the keyboard input in MUI datepick V5?

In the past, I used DatePicker in @material-ui/date-pickers, which only allow picker.

In my project, I upgraged to MUI V5 and follow this doc https://mui.com/x/react-date-pickers/migration-lab/

-import { DatePicker } from '@material-ui/pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';


 <DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />

After migrated to v5, the compoent allows keyboard input, which cause an issue in my system.

It is because our system's date format displays with "dd-MMM-yyyy". If the compenent allows the keyboard input, it will cause some probelms with using this format 'dd-MMM-yyyy'. Hence, I hope to disable the keyboard input only allow the picker.

May I know how can disable it? Thanks

Upvotes: 0

Views: 3599

Answers (1)

Martin TT
Martin TT

Reputation: 311

I found a solution. Added the "readOnly: true" to TextField's inputProps.

<DatePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        inputProps={{
          ...params.inputProps,
          readOnly: true
        }}
      />
    )}
  />

Upvotes: 3

Related Questions