readOnly не применяется для поля ввода KeyboardDatePicker материала пользовательского интерфейса в реагировать JS

Question

KeyboardDatePicker не поддерживает свойство readOnly для его поля ввода

Я пробовал свойство readOnly, которое уже упоминалось в документе API, но оно не сработало.Он применяет readOnly для родительского контейнера, а не для поля ввода в 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',
                   }}```

---

1. Заголовок

   #

Answer 1

Вам просто нужно переопределить TextFieldComponent`.

Вот рабочий код: -

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);