时间戳

首页 > 解决方案 > 如何从 Material UI 中删除 KeyboardDatePicker 中的输入字段？

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

问题描述

尝试使用 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',
          }}
        />

可以用道具设置吗？

标签： reactjsmaterial-ui

解决方案

用一点 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
/>

推荐阅读