62 lines
3.1 KiB
JavaScript
62 lines
3.1 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, FormControl, FormHelperText, InputAdornment, Stack} from "@mui/material";
|
|
import ClearIcon from "@mui/icons-material/Clear";
|
|
|
|
export default function PickerWithButtonField({
|
|
formik,
|
|
name,
|
|
value,
|
|
error,
|
|
touched,
|
|
disabled,
|
|
}) {
|
|
return (
|
|
<FormControl variant="outlined" fullWidth size="small" error={!!error}>
|
|
<Stack sx={{width : "100%"}} direction={"row"}>
|
|
<LocalizationProvider
|
|
dateAdapter={AdapterDateFnsJalali}
|
|
localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
|
|
>
|
|
<MobileDateTimePicker
|
|
ampm={false}
|
|
disableFuture
|
|
value={value ? new Date(value) : null}
|
|
onChange={(newValue) => {
|
|
const formattedDate = moment(newValue).locale("en").format("YYYY-MM-DD HH:mm");
|
|
formik.setFieldValue(name, formattedDate);
|
|
}}
|
|
slotProps={{
|
|
textField: {
|
|
placeholder: name === "start_date"
|
|
? "تاریخ شروع را وارد کنید"
|
|
: "تاریخ اتمام را وارد کنید",
|
|
variant: "outlined",
|
|
disabled,
|
|
fullWidth: true,
|
|
error: !!error,
|
|
helperText : touched && error ,
|
|
size: "small", // Ensure that the TextField is small
|
|
InputProps: {
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
size="small" // Set size="small" for IconButton
|
|
onClick={() => formik.setFieldValue(name, null)}
|
|
>
|
|
<ClearIcon />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
</Stack>
|
|
</FormControl>
|
|
);
|
|
}
|