在没有文本字段的情况下控制 MUI Datepicker v6 弹出窗口的位置

Question

我正在渲染一个没有文本字段的

Datepicker

，并且无论我传递什么

slotProps

popper

属性来定位它，它都会定位在屏幕的左上角。从其他帖子中，我了解到问题在于它将弹出窗口锚定在文本字段上，并且在没有文本字段的情况下，它将其定位在屏幕的左上角。

从其他帖子中，我收集到可能会用自定义的

TextField

来解决这个问题，但我不确定应该采取什么形式，或者是否有更简单或更惯用的解决方案。任何帮助将不胜感激。

这是代码和一个演示问题的沙箱：

import React, { useState } from "react";
import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export default function BasicDatePicker() {
  const [open, setOpen] = useState(false);
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
        }}
      >
        <DemoContainer components={["DatePicker"]}>
          <button onClick={() => setOpen(!open)}>
            Toggle Calendar Open/Closed
          </button>
          <DatePicker
            open={open}
            onClose={() => {
              setOpen(false);
            }}
            slots={{ textField: () => null }}
          />
        </DemoContainer>
      </div>
    </LocalizationProvider>
  );
}

顺便说一句，我询问过的人工智能机器人似乎只了解 v5。

Answer 1

对于 v7，您可以使用

slotProps

属性指定 DatePicker 日历的位置，如下所示：

                slotProps={{
                    popper: {
                        anchorEl: document.getElementById('event-icon'),
                    },
                }}

抱歉，但我不记得在哪里找到这个细节了。当然，您可以使用任何您想要的

anchorEl

值。

Answer 2

将 MUI 日期选择器从 6 更新到 7 后，我们遇到了同样的错误。通用解决方案是：

const periodRef = useRef<HTMLDivElement>(null);

<DateRangePicker
  slotProps={{
    popper: {
      anchorEl: periodRef.current,
    },