如何设置MUI X Date Picker弹出器方向至日历图标侧？

我使用的MUI X Date Picker弹出面板始终显示在输入框左下角，希望将弹出器方向调整至日历图标所在一侧，已尝试多时仍未解决。

当前代码实现如下：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    sx={{
      width: 453,
      marginBottom: 5,
      "& .MuiInputBase-root": {
        height: 48,
        borderRadius: "0.5rem",
        border: "1px solid #CBD5E0",
      },
    }}
    components={{
      OpenPickerIcon: () => (
        <img
          src={calendarIcon}
          alt="Calendar Icon"
          className="w-[24px] h-[24px] mx-[4px]"
        />
      ),
    }}
    format="DD-MM-YYYY"
  />
</LocalizationProvider>

解决方法 #

要将弹出面板定位到日历图标所在的右侧，可通过PopperProps配置弹出器的位置参数，以下是几种可行方案：

方案1：直接设置弹出位置 #

通过placement属性指定弹出面板对齐输入框右下角（对应图标所在侧）：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    sx={{
      width: 453,
      marginBottom: 5,
      "& .MuiInputBase-root": {
        height: 48,
        borderRadius: "0.5rem",
        border: "1px solid #CBD5E0",
      },
    }}
    components={{
      OpenPickerIcon: () => (
        <img
          src={calendarIcon}
          alt="Calendar Icon"
          className="w-[24px] h-[24px] mx-[4px]"
        />
      ),
    }}
    format="DD-MM-YYYY"
    // 新增弹出位置配置
    PopperProps={{
      placement: 'bottom-end'
    }}
  />
</LocalizationProvider>

方案2：精准锚点定位 #

如果默认位置效果不够理想，可手动定义锚点和弹出面板的变换原点，让弹出面板左上角对齐图标下方：

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    sx={{
      width: 453,
      marginBottom: 5,
      "& .MuiInputBase-root": {
        height: 48,
        borderRadius: "0.5rem",
        border: "1px solid #CBD5E0",
      },
    }}
    components={{
      OpenPickerIcon: () => (
        <img
          src={calendarIcon}
          alt="Calendar Icon"
          className="w-[24px] h-[24px] mx-[4px]"
        />
      ),
    }}
    format="DD-MM-YYYY"
    PopperProps={{
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'right',
      },
      transformOrigin: {
        vertical: 'top',
        horizontal: 'right',
      },
    }}
  />
</LocalizationProvider>

方案3：处理边界溢出（可选） #

若页面边缘导致弹出面板被截断，可添加自动调整规则：

PopperProps={{
  placement: 'bottom-end',
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        altBoundary: true,
        rootBoundary: 'viewport',
      },
    },
  ],
}}

以上配置均基于MUI Popper组件的原生属性，可直接作用于DatePicker的弹出容器，精准控制弹出位置到图标所在侧。

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