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',
    }}

score 18 · Answer 1 · answered Nov 20 '20 at 20:11

18

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

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

/>

answered Nov 20 '20 at 20:11

Jason Jin

1,739
14
21

2

This worked perfectly for me, acts like a 'Disable' prop but doesn't affect styling. Thanks! – James Brightman Feb 18 '21 at 14:04

score 6 · Answer 2 · answered Sep 25 '19 at 12:55

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

his works but it affects the ui a lot, i mean everything becomes grey. Is there a way to just disable the input field somehow ? — Aldor, Jul 23 '20 at 06:50
@Aldor The color of the disabled input for the date picker can be set using InputProps InputProps={{ classes: { disabled: classes.disabledDatePicker } }} where the class is defined in const useStyles = makeStyles((theme: Theme) => ({ root: { display: 'flex', flexWrap: 'wrap', }, disabledDatePicker: { color: '#800080' } })); — ChrisP, Aug 17 '20 at 15:08

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

2 Answers2