如何从 Material UI 中删除 KeyboardDatePicker 中的输入字段？

【问题标题】：How can I get rid of input field in KeyboardDatePicker from Material UI?如何从 Material UI 中删除 KeyboardDatePicker 中的输入字段？
【发布时间】：2020-06-05 12:22:14
【问题描述】：

尝试使用 KeyboardDatePicker。在一种形式中，输入字段完全可以，但在另一种形式中，我只需要一个图标即可打开并选择日期。

        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          // inputVariant="outlined"
          autoOk
          format="dd/MM/yyyy"
          id="date-picker-inline"
          // label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          InputAdornmentProps={{ position: "start"}}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />

可以用 props 设置吗？

【问题讨论】：

可能是这个帮助。stackoverflow.com/questions/54970335/…

标签： reactjs material-ui

【解决方案1】：

用一点 css 就可以隐藏它

<KeyboardDatePicker
  disableToolbar
  variant="inline"
  format="DD/MM/YYYY"
  value={selectedDate}
  onChange={onChange}
  className="styledKeyboardDatePicker"
  autoOk
  InputAdornmentProps={{ position: "start"}}
  KeyboardButtonProps={{
    'aria-label': 'change date',
  }}
/>

.styledKeyboardDatePicker .MuiInputBase-input {
  visibility: hidden;
  width: 0;
}

另一种解决方法是禁用它。它不允许您更改输入，但图标仍然有效。

<KeyboardDatePicker
  disableToolbar
  variant="inline"
  format="DD/MM/YYYY"
  value={selectedDate}
  onChange={onChange}
  autoOk
  InputAdornmentProps={{ position: "start"}}
  KeyboardButtonProps={{
    'aria-label': 'change date',
  }}
  disable
/>

【讨论】：