时间戳

首页 > 解决方案 > React Mui DateRangePicker 包括日历图标

reactjs - React Mui DateRangePicker 包括日历图标

问题描述

我想用日历图标从 Material UI 实现一个 DateRangePicker，例如它应该看起来像这样： 在此处输入图像描述

根据 Api 文档，它应该可以使用

components={{
  OpenPickerIcon: CalendarTodayIcon
}}

但事实并非如此。请参阅代码沙盘。

我还尝试通过手动将图标添加到显示图标但在单击图标时不打开 PopupMenu 的 TextField 中。

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

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

标签： reactjstypescriptmaterial-uireact-typescript

解决方案

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

components={{
  OpenPickerIcon: CalendarTodayIcon
}}

应该工作，但它没有。

在您的解决方法中，您IconButton自然不会在 onClick 事件处理程序上提供任何内容，单击时图标什么也不做。

您需要做的是在单击图标时专注于输入。您可以通过useRef在输入中使用钩子，然后current.focus()在 IconButton 的 onClick 处理程序中调用该方法来实现这一点。

  const startInputRef = React.useRef();

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

有关工作示例，请参见代码框。

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

推荐阅读