70 lines
2.3 KiB
JavaScript
70 lines
2.3 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 React, { 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.value}</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 |