68 lines
3.2 KiB
JavaScript
68 lines
3.2 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, InputAdornment, TextField } from "@mui/material";
|
|
import ClearIcon from "@mui/icons-material/Clear";
|
|
import { useState } from "react";
|
|
|
|
export default function MuiDatePicker({label, name, formik, defaultValue, minDate, maxDate, onDateChange }) {
|
|
const [pickerValue, setPickerValue] = useState(defaultValue ? new Date(defaultValue) : null);
|
|
|
|
return (
|
|
<Box sx={{ position: 'relative' }}>
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDateFnsJalali}
|
|
localeText={
|
|
faIR.components.MuiLocalizationProvider.defaultProps.localeText
|
|
}
|
|
>
|
|
<MobileDateTimePicker
|
|
key={formik.values[name]}
|
|
ampm={false}
|
|
onChange={(newValue) => {
|
|
const date = new Date(newValue);
|
|
const formattedDate = moment(date)
|
|
.locale("en")
|
|
.format("YYYY-MM-DD HH:mm");
|
|
formik.setFieldValue(name, formattedDate);
|
|
onDateChange(formattedDate);
|
|
setPickerValue(newValue);
|
|
}}
|
|
slotProps={{
|
|
textField: {
|
|
placeholder: "تاریخ خود را وارد کنید",
|
|
helperText: label,
|
|
InputProps: {
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
formik.setFieldValue(name, "");
|
|
setPickerValue(null);
|
|
}}
|
|
sx={{
|
|
color: "#bfbfbf",
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(189, 189, 189, 0.1)',
|
|
},
|
|
}}
|
|
>
|
|
<ClearIcon />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
},
|
|
}}
|
|
value={pickerValue}
|
|
minDate={minDate ? new Date(minDate) : null}
|
|
maxDate={maxDate ? new Date(maxDate) : null}
|
|
/>
|
|
</LocalizationProvider>
|
|
</Box>
|
|
);
|
|
}
|