readOnly is not applying for input field of KeyboardDatePicker of material ui in react js

Question

KeyboardDatePicker is not supporting readOnly property for its input field

I tried readOnly property which already mentioned in API document, but its not worked out. It is applying readOnly for parent container not for the input field in KeyboardDatePicker.

<KeyboardDatePicker
    margin="normal"
    id="mui-pickers-date"
    className = "dialog-calendar"
    value={selectedDate}
    shouldDisableDate = {handleDisableDate}
    minDate = {startDate}
    maxDate = {endDate}
    minDateMessage = ''
    onChange={handleDateChange}
    format = "MM/dd/yyyy"
    disablePast = {true}
    disabled = {isDisabled}
    allowKeyboardControl = {false}
    readOnly = {true}
    autoFill = {false}
    KeyboardButtonProps={{
         'aria-label': 'change date',
    }}

Answer 1

Here is how I tried to set the read-only.

<KeyboardDatePicker
  ...
  InputProps={{ readOnly: true }}

/>

Answer 2

You just need to override the TextFieldComponent`.

Here is the working code:-

import React from "react";
import ReactDOM from "react-dom";
import TextField from '@material-ui/core/TextField';
import { KeyboardDatePicker, MuiPickersUtilsProvider, } from "@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns';

const TextFieldComponent = (props) => {
  return <TextField {...props} disabled={true} />
}
function App() {
  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2014-08-18T21:11:54")
  );
  const handleDateChange = date => {
    setSelectedDate(date);
  };
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        disableToolbar
        variant="inline"
        format="MM/dd/yyyy"
        margin="normal"
        id="date-picker-inline"
        label="Date picker inline"
        value={selectedDate}
        onChange={handleDateChange}
        KeyboardButtonProps={{
          "aria-label": "change date"
        }}
        TextFieldComponent={TextFieldComponent}
      />
    </MuiPickersUtilsProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);