70 lines
1.9 KiB
JavaScript
70 lines
1.9 KiB
JavaScript
import CalendarEdit from "@/components/icons/CalendarEdit";
|
|
import { convertToJalali } from "@/helper";
|
|
import { Button, Popover } from "@mui/material";
|
|
import { DatePicker } from "jalaali-react-date-picker";
|
|
import { useState } from "react";
|
|
|
|
function DateBirthday({ data, changeData }) {
|
|
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 className="w-full">
|
|
<div
|
|
className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
|
|
onClick={handleClick}
|
|
>
|
|
<p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
|
|
{data}
|
|
</p>
|
|
<Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
|
|
<CalendarEdit />
|
|
</Button>
|
|
</div>
|
|
<Popover
|
|
id={id}
|
|
open={open}
|
|
anchorEl={anchorEl}
|
|
onClose={handleClose}
|
|
anchorOrigin={{
|
|
vertical: "bottom",
|
|
horizontal: "right",
|
|
}}
|
|
transformOrigin={{
|
|
vertical: "top",
|
|
horizontal: "right",
|
|
}}
|
|
sx={{
|
|
"& .MuiPaper-root": {
|
|
padding: "12px",
|
|
background: "#FAFAFA !important",
|
|
borderRadius: "16px",
|
|
border: "1px solid #E9ECEF",
|
|
boxShadow: "0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)",
|
|
},
|
|
}}
|
|
>
|
|
<DatePicker
|
|
locale="fa"
|
|
onChange={(e) => {
|
|
changeData(convertToJalali(e._d), "value", "date_of_birth");
|
|
handleClose();
|
|
}}
|
|
/>
|
|
</Popover>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DateBirthday;
|