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 用于存儲(chǔ)Popover所錨定的DOM元素（這里是按鈕）
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );

  // handleClick 函數(shù)在按鈕被點(diǎn)擊時(shí)調(diào)用，設(shè)置anchorEl為當(dāng)前點(diǎn)擊的按鈕
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  // handleClose 函數(shù)在Popover關(guān)閉時(shí)調(diào)用，將anchorEl設(shè)為null
  const handleClose = () => {
    setAnchorEl(null);
  };

  // open 變量根據(jù)anchorEl是否存在來(lái)判斷Popover是否打開(kāi)
  const open = Boolean(anchorEl);
  // id 用于可訪問(wèn)性，當(dāng)Popover打開(kāi)時(shí)設(shè)置
  const id = open ? "simple-popover" : undefined;

  // ... (JSX 返回)
}

  return (
    <div>
      {/* 觸發(fā)日期選擇器彈窗的按鈕 */}
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        選擇日期
      </Button>

      {/* Popover 組件，包含 StaticDatePicker */}
      <Popover
        id={id} // 綁定id，用于可訪問(wèn)性
        open={open} // 控制Popover的打開(kāi)/關(guān)閉狀態(tài)
        anchorEl={anchorEl} // 錨定到觸發(fā)按鈕
        onClose={handleClose} // Popover關(guān)閉時(shí)的回調(diào)
        anchorOrigin={{ // Popover相對(duì)于錨定元素的起始位置
          vertical: "bottom",
          horizontal: "left"
        }}
        transformOrigin={{ // Popover自身內(nèi)容的變換起始點(diǎn)
            vertical: "top",
            horizontal: "left"
        }}
      >
        {/* LocalizationProvider 必須包裹所有MUI X日期組件 */}
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          {/* StaticDatePicker 提供純粹的日歷視圖 */}
          <StaticDatePicker
            defaultValue={dayjs("2022-04-17")} // 設(shè)置默認(rèn)選中日期
            // 可以添加onAccept, onChange等屬性來(lái)處理日期選擇事件
            // onAccept={(date) => {
            //   console.log("Selected date:", date);
            //   handleClose(); // 選擇后關(guān)閉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);
    // 可選：在選擇日期后立即關(guān)閉彈窗
    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>
  );
}