54 lines
2.2 KiB
JavaScript
54 lines
2.2 KiB
JavaScript
import React from "react";
|
|
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
|
import { faIR } from "@mui/x-date-pickers/locales";
|
|
import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
|
|
import { IconButton, InputAdornment } from "@mui/material";
|
|
import ClearIcon from "@mui/icons-material/Clear";
|
|
|
|
const CustomDatePicker = ({ dateValue, setDateValue, placeholder = "انتخاب تاریخ", size = "small" }) => {
|
|
const handleDateChange = (newValue) => {
|
|
setDateValue(newValue);
|
|
};
|
|
|
|
return (
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDateFnsJalali}
|
|
localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
|
|
>
|
|
<MobileDatePicker
|
|
value={dateValue || null}
|
|
onChange={handleDateChange}
|
|
slotProps={{
|
|
textField: {
|
|
size: size,
|
|
placeholder: placeholder,
|
|
InputProps: {
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
size={size}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
setDateValue(null);
|
|
}}
|
|
sx={{
|
|
color: "#bfbfbf",
|
|
"&:hover": {
|
|
backgroundColor: "rgba(189, 189, 189, 0.1)",
|
|
color: "#363434",
|
|
},
|
|
}}
|
|
>
|
|
<ClearIcon />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
},
|
|
}}
|
|
></MobileDatePicker>
|
|
</LocalizationProvider>
|
|
);
|
|
};
|
|
export default CustomDatePicker;
|