readOnly 未在 react js 中申请材料 ui 的 KeyboardDatePicker 的输入字段

Question

KeyboardDatePicker 不支持其输入字段的 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',
    }}

Answer 1

这是我尝试设置只读的方式。

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

/>

Answer 2

您只需要覆盖 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);