React Mui DateRangePicker 包含日历图标

Question

我想实现一个带有日历图标的 DateRangePicker from Material UI，例如它应该是这样的：

根据 Api 文档，它应该适用于

components={{
  OpenPickerIcon: CalendarTodayIcon
}}

但事实并非如此。参见 codesandbock。

我也尝试过将图标手动添加到显示图标但在单击图标时不打开弹出菜单的 TextField。

InputProps={{
  endAdornment: (
    <InputAdornment position="end">
      <IconButton>
        <CalendarTodayIcon />
      </IconButton>
    </InputAdornment>
  )
}}

有人知道如何实施吗？我正在使用 mui 5.1.0 和 mui/lab 5.0.0-alpha.50

Answer 1

我没有使用库中的组件，但根据文档你是对的

components={{
  OpenPickerIcon: CalendarTodayIcon
}}

应该可以，但没有。

在您的解决方法中，您没有在 IconButton onClick 事件处理程序上提供任何内容，因此很自然地，单击时图标不执行任何操作。

您需要做的是在单击图标时将注意力集中在输入上。您可以通过在输入中使用 useRef 挂钩然后在 IconButton 的 onClick 处理程序中调用 current.focus() 方法来实现。

  const startInputRef = React.useRef();

<TextField
              inputRef={startInputRef}
              {...startProps}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton
                      onClick={() => {
                        startInputRef.current.focus();
                      }}
                    >
                      <CalendarTodayIcon />
                    </IconButton>
                  </InputAdornment>
                )
              }}
            />

有关工作示例，请参阅 codesandbox。

我仍然认为这是一个 hacky 解决方法，所以我建议在库的 github 回购上打开一个问题以获取说明。

React Mui DateRangePicker 包含日历图标

React Mui DateRangePicker include Calendar Icon

typescript

reactjs

material-ui

react-typescript