MUI X Date Picker：无输入框弹窗式日期选择器的实现指南

import React from "react";
import Button from "@mui/material/Button";
import Popover from "@mui/material/Popover";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
import dayjs from "dayjs";

export default function DatePickerPopOver() {
  // anchorEl 用于存储Popover所锚定的DOM元素（这里是按钮）
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );

  // handleClick 函数在按钮被点击时调用，设置anchorEl为当前点击的按钮
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  // handleClose 函数在Popover关闭时调用，将anchorEl设为null
  const handleClose = () => {
    setAnchorEl(null);
  };

  // open 变量根据anchorEl是否存在来判断Popover是否打开
  const open = Boolean(anchorEl);
  // id 用于可访问性，当Popover打开时设置
  const id = open ? "simple-popover" : undefined;

  // ... (JSX 返回)
}

  return (
    <div>
      {/* 触发日期选择器弹窗的按钮 */}
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        选择日期
      </Button>

      {/* Popover 组件，包含 StaticDatePicker */}
      <Popover
        id={id} // 绑定id，用于可访问性
        open={open} // 控制Popover的打开/关闭状态
        anchorEl={anchorEl} // 锚定到触发按钮
        onClose={handleClose} // Popover关闭时的回调
        anchorOrigin={{ // Popover相对于锚定元素的起始位置
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{ // Popover自身内容的变换起始点
            vertical: "top",
            horizontal: "left"
        }}
      >
        {/* LocalizationProvider 必须包裹所有MUI X日期组件 */}
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          {/* StaticDatePicker 提供纯粹的日历视图 */}
          <StaticDatePicker
            defaultValue={dayjs("2022-04-17")} // 设置默认选中日期
            // 可以添加onAccept, onChange等属性来处理日期选择事件
            // onAccept={(date) => {
            //   console.log("Selected date:", date);
            //   handleClose(); // 选择后关闭Popover
            // }}
          />
        </LocalizationProvider>
      </Popover>
    </div>
  );

import React from "react";
import Button from "@mui/material/Button";
import Popover from "@mui/material/Popover";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
import dayjs from "dayjs";

export default function DatePickerPopOver() {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );
  const [selectedDate, setSelectedDate] = React.useState<dayjs.Dayjs | null>(dayjs("2022-04-17"));

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleDateChange = (newDate: dayjs.Dayjs | null) => {
    setSelectedDate(newDate);
    // 可选：在选择日期后立即关闭弹窗
    handleClose();
  };

  const open = Boolean(anchorEl);
  const id = open ? "date-picker-popover" : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        {selectedDate ? `已选: ${selectedDate.format('YYYY-MM-DD')}` : '选择日期'}
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{
            vertical: "top",
            horizontal: "left"
        }}
      >
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <StaticDatePicker
            value={selectedDate} // 控制日期选择器的值
            onChange={handleDateChange} // 处理日期变化事件
            // defaultValue={dayjs("2022-04-17")} // 如果不需要受控组件，可以使用defaultValue
          />
        </LocalizationProvider>
      </Popover>
    </div>
  );
}