filter

2024-03-13 16:07:55 +03:30
parent 95c63f1058
commit 8f93feb609
13 changed files with 616 additions and 64 deletions
--- a/src/components/MuiDatePicker.jsx
+++ b/src/components/MuiDatePicker.jsx
@@ -0,0 +1,63 @@
+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 {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={{ padding: '4px', position: 'relative' }}>
+            <Box sx={{ display: "flex", alignItems: "center" }}>
+                <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,
+                            },
+                        }}
+                        value={pickerValue}
+                        minDate={minDate ? new Date(minDate) : null}
+                        maxDate={maxDate ? new Date(maxDate) : null}
+                    />
+                </LocalizationProvider>
+            </Box>
+            <IconButton
+                size="small"
+                onClick={() => {
+                    formik.setFieldValue(name, "");
+                    setPickerValue(null);
+                }}
+                sx={{
+                    color: "#bfbfbf",
+                    position: 'absolute',
+                    right: '4px',
+                    top: '35%',
+                    transform: 'translateY(-50%)',
+                }}
+            >
+                <ClearIcon />
+            </IconButton>
+        </Box>
+    );
+}