58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
import { useState } from "react";
|
|
import { Button, Popover } from "@mui/material";
|
|
import DatePickerContent from "./DatePickerContent";
|
|
|
|
function PopoverDate({ text, updateDate, type }) {
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
|
|
const handleClick = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const open = Boolean(anchorEl);
|
|
const id = open ? "simple-popover" : undefined;
|
|
|
|
return (
|
|
<div>
|
|
<Button
|
|
onClick={handleClick}
|
|
className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E] dark:!text-[#A1A1A1] !text-[16px] !font-normal !w-[115px]"
|
|
>
|
|
{text}
|
|
</Button>
|
|
<Popover
|
|
id={id}
|
|
open={open}
|
|
anchorEl={anchorEl}
|
|
onClose={handleClose}
|
|
anchorOrigin={{
|
|
vertical: "bottom",
|
|
horizontal: "right",
|
|
}}
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
sx={{
|
|
"& .MuiPaper-root": {
|
|
background: "transparent !important",
|
|
border: "none !important",
|
|
},
|
|
}}
|
|
>
|
|
<DatePickerContent
|
|
type={type}
|
|
updateDate={updateDate}
|
|
handleClose={handleClose}
|
|
/>
|
|
</Popover>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PopoverDate;
|