如何用按钮控制Material UI v5 Datepicker弹窗开关并解决位置异常

问题说明 #

我在React应用里通过图标按钮控制Material UI v5 Datepicker弹窗的开关，但Datepicker一直显示在左上角，没法实现内联（inline）的显示效果，相关代码如下：

function handleShowCalendar() {
  setState({ showCalendar: true })
}
<TextField
  {...params}
  autoFocus={props.autoFocus}
  fullWidth
  placeholder="Enter a task..."
  variant="outlined"
  size="small"
  InputProps={{
    ...params.InputProps,
    onKeyUp: handleKeyUp,
    endAdornment: addTodo.isLoading ? (
      <Box position="absolute" top={10} right={10}>
        <CircularProgress size={16} />
      </Box>
    ) : (
      <Box position="absolute" top={-4} right={0}>
        <IconButton
          onClick={handleShowCalendar}
          disabled={state.text.length <= 0}
        >
          <CalendarToday />
        </IconButton>
      </Box>
    ),
  }}
/>

...

<DatePicker
  open={state.showCalendar}
  value={state.due}
  onChange={handleChangeDate}
  onClose={() => setState({ showCalendar: false })}
  disableHighlightToday
  // DialogProps={{ sx: { postition: "inline" } }}
  renderInput={(params) => <Fragment {...params} />}
  showToolbar={true}
  ToolbarComponent={() => (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6">Due Date</Typography>
      </Toolbar>
    </AppBar>
  )}
/>
</Fragment>

解决方法 #

核心问题是你用了Fragment作为renderInput的返回值，导致Datepicker失去了定位参考，同时没有正确配置弹窗的定位属性。按以下步骤调整：

• 替换renderInput的返回值
  Datepicker依赖renderInput返回的元素来计算弹窗位置，用Fragment会让它找不到定位锚点。改成返回一个隐藏的TextField：

  renderInput={(params) => <TextField {...params} hidden />}
  

• 配置PopperProps控制弹窗定位
  Datepicker默认用Popper组件来渲染弹窗，要实现内联显示，需要调整Popper的定位规则：

  PopperProps={{
    placement: "bottom-start", // 弹窗显示在触发元素的左下方
    positionFixed: false,
    modifiers: [
      {
        name: "offset",
        options: {
          offset: [0, 8], // 调整弹窗和按钮的间距，按需修改
        },
      },
    ],
  }}
  

• 将Datepicker与触发按钮放在同一相对定位容器中
  把TextField和Datepicker包裹在一个设置了position: relative的容器里，确保Popper能正确计算相对位置：

  <Box position="relative">
    {/* 你的TextField代码 */}
    <DatePicker
      // 其他属性
      PopperProps={{
        placement: "bottom-start",
        positionFixed: false,
        modifiers: [{ name: "offset", options: { offset: [0, 8] } }],
      }}
      renderInput={(params) => <TextField {...params} hidden />}
    />
  </Box>
  

• 修正拼写错误
  你注释的DialogProps里有个拼写错误：postition应该是position，不过如果用Popper模式的话这个配置不会生效，因为Datepicker默认用Popper而非Dialog展示弹窗。

调整后的Datepicker完整代码：

<DatePicker
  open={state.showCalendar}
  value={state.due}
  onChange={handleChangeDate}
  onClose={() => setState({ showCalendar: false })}
  disableHighlightToday
  PopperProps={{
    placement: "bottom-start",
    positionFixed: false,
    modifiers: [
      {
        name: "offset",
        options: {
          offset: [0, 8],
        },
      },
    ],
  }}
  renderInput={(params) => <TextField {...params} hidden />}
  showToolbar={true}
  ToolbarComponent={() => (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6">Due Date</Typography>
      </Toolbar>
    </AppBar>
  )}
/>

内容的提问来源于stack exchange，提问作者GLP