62 lines
2.3 KiB
JavaScript
62 lines
2.3 KiB
JavaScript
import {LocalizationProvider, MobileDateTimePicker} from "@mui/x-date-pickers";
|
|
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
|
import moment from "jalali-moment";
|
|
import {faIR} from "@mui/x-date-pickers/locales";
|
|
import {Box, IconButton} from "@mui/material";
|
|
import ClearIcon from "@mui/icons-material/Clear";
|
|
import {useTranslations} from "next-intl";
|
|
|
|
export default function MuiDatePicker({column}) {
|
|
const t = useTranslations();
|
|
const filterFnValue = column.columnDef._filterFn;
|
|
|
|
return (
|
|
<Box sx={{display: "flex", alignItems: "start"}}>
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDateFnsJalali}
|
|
localeText={
|
|
faIR.components.MuiLocalizationProvider.defaultProps
|
|
.localeText
|
|
}
|
|
>
|
|
<MobileDateTimePicker
|
|
ampm={false}
|
|
onChange={(newValue) => {
|
|
const date = new Date(newValue);
|
|
const formattedDate = moment(date)
|
|
.locale("en")
|
|
.format("YYYY-MM-DD HH:mm");
|
|
column.setFilterValue(formattedDate);
|
|
}}
|
|
slotProps={{
|
|
textField: {
|
|
placeholder: "تاریخ خود را وارد کنید",
|
|
helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
|
|
sx: {minWidth: "120px"},
|
|
variant: "standard",
|
|
},
|
|
}}
|
|
value={
|
|
column.getFilterValue()
|
|
? new Date(column.getFilterValue())
|
|
: null
|
|
}
|
|
/>
|
|
</LocalizationProvider>
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => {
|
|
column.setFilterValue(null);
|
|
}}
|
|
sx={{
|
|
color: column.getFilterValue()
|
|
? "rgba(0, 0, 0, 0.54)"
|
|
: "#bfbfbf",
|
|
}}
|
|
>
|
|
<ClearIcon/>
|
|
</IconButton>
|
|
</Box>
|
|
);
|
|
}
|