fixed min and max datetimes

src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetDateTime/MissionDates/index.jsx

@@ -1,11 +1,21 @@
 import MuiDatePicker from "@/core/components/MuiDatePicker";
 import MuiTimePicker from "@/core/components/MuiTimePicker";
+import { makeDateTime } from "@/core/utils/makeDateTime";
 import { Grid } from "@mui/material";
 import { Controller, useWatch } from "react-hook-form";
 
 const MissionDates = ({ control }) => {
     const type = useWatch({ control, name: "type" });
-    return (
+    const start_date = useWatch({ control, name: "start_date" });
+    const end_date = useWatch({ control, name: "end_date" });
+    const start_time = useWatch({ control, name: "start_time" });
+    const end_time = useWatch({ control, name: "end_time" });
+
+    const startDateTime = makeDateTime(start_date, start_time);
+    const endDateTime = makeDateTime(end_date, end_time);
+    const now = new Date();
+
+    return type && (
         <>
             <Grid item xs={12} sm={6}>
                 <Controller
@@ -17,6 +27,9 @@ const MissionDates = ({ control }) => {
                                 name="start_date"
                                 error={error}
                                 value={field.value}
+                                disableFuture={false}
+                                minDate={now}
+                                maxDate={end_date ?? null}
                                 placeholder={"تاریخ شروع ماموریت را وارد کنید"}
                                 label={"تاریخ شروع ماموریت"}
                                 setFieldValue={(name, value) => field.onChange(value || [])}
@@ -38,6 +51,12 @@ const MissionDates = ({ control }) => {
                                     error={error}
                                     value={field.value}
                                     views={["hours"]}
+                                    minTime={
+                                        start_date && new Date(start_date).toDateString() === now.toDateString()
+                                            ? now
+                                            : null
+                                    }
+                                    maxTime={endDateTime ?? null}
                                     placeholder={"زمان شروع ماموریت را وارد کنید"}
                                     label={"زمان شروع ماموریت"}
                                     setFieldValue={(name, value) => field.onChange(value || null)}
@@ -58,6 +77,8 @@ const MissionDates = ({ control }) => {
                                 name="end_date"
                                 error={error}
                                 value={field.value}
+                                disableFuture={false}
+                                minDate={start_date ? start_date : now}
                                 placeholder={"تاریخ پایان ماموریت را وارد کنید"}
                                 label={"تاریخ پایان ماموریت"}
                                 setFieldValue={(name, value) => field.onChange(value || [])}
@@ -79,6 +100,7 @@ const MissionDates = ({ control }) => {
                                     error={error}
                                     value={field.value}
                                     views={["hours"]}
+                                    minTime={startDateTime ?? null}
                                     placeholder={"زمان پایان ماموریت را وارد کنید"}
                                     label={"زمان پایان ماموریت"}
                                     setFieldValue={(name, value) => field.onChange(value || null)}

src/components/dashboard/roadMissions/operator/Actions/CreateWithoutProcess/Form/GetDateTime/MissionDates/index.jsx

@@ -1,9 +1,17 @@
 import MuiDatePicker from "@/core/components/MuiDatePicker";
 import MuiTimePicker from "@/core/components/MuiTimePicker";
 import { Grid } from "@mui/material";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 
 const MissionDates = ({ control }) => {
+    const start_date = useWatch({ control, name: "start_date" });
+    const end_date = useWatch({ control, name: "end_date" });
+    const start_time = useWatch({ control, name: "start_time" });
+    const end_time = useWatch({ control, name: "end_time" });
+
+    const startDateTime = makeDateTime(start_date, start_time);
+    const endDateTime = makeDateTime(end_date, end_time);
+    const now = new Date();
     return (
         <>
             <Grid item xs={12} sm={6}>
@@ -16,6 +24,7 @@ const MissionDates = ({ control }) => {
                                 name="start_date"
                                 error={error}
                                 value={field.value}
+                                maxDate={end_date ?? null}
                                 placeholder={"تاریخ شروع ماموریت را وارد کنید"}
                                 label={"تاریخ شروع ماموریت"}
                                 setFieldValue={(name, value) => field.onChange(value || [])}
@@ -36,6 +45,12 @@ const MissionDates = ({ control }) => {
                                 error={error}
                                 value={field.value}
                                 views={["hours"]}
+                                minTime={
+                                    start_date && new Date(start_date).toDateString() === now.toDateString()
+                                        ? now
+                                        : null
+                                }
+                                maxTime={endDateTime ?? null}
                                 placeholder={"زمان شروع ماموریت را وارد کنید"}
                                 label={"زمان شروع ماموریت"}
                                 setFieldValue={(name, value) => field.onChange(value || null)}
@@ -55,6 +70,7 @@ const MissionDates = ({ control }) => {
                                 name="end_date"
                                 error={error}
                                 value={field.value}
+                                minDate={start_date ? start_date : null}
                                 placeholder={"تاریخ پایان ماموریت را وارد کنید"}
                                 label={"تاریخ پایان ماموریت"}
                                 setFieldValue={(name, value) => field.onChange(value || [])}
@@ -75,6 +91,7 @@ const MissionDates = ({ control }) => {
                                 error={error}
                                 value={field.value}
                                 views={["hours"]}
+                                minTime={startDateTime ?? null}
                                 placeholder={"زمان پایان ماموریت را وارد کنید"}
                                 label={"زمان پایان ماموریت"}
                                 setFieldValue={(name, value) => field.onChange(value || null)}

src/core/components/MuiDatePicker.jsx

@@ -6,7 +6,7 @@ import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import moment from "jalali-moment";
 
-function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error, label }) {
+function MuiDatePicker({ value, disableFuture = true, setFieldValue, name, minDate, maxDate, helperText, placeholder, error, label }) {
     return (
         <>
             <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
@@ -20,7 +20,7 @@ function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperTex
                         id={name}
                         name={name}
                         closeOnSelect
-                        disableFuture
+                        disableFuture={disableFuture}
                         label={label}
                         aria-describedby="component-helper-text"
                         onChange={(value) => {

src/core/utils/makeDateTime.js

@@ -0,0 +1,9 @@
+export const makeDateTime = (date, time) => {
+    if (!date) return null;
+    const d = new Date(date);
+    if (time) {
+        const t = new Date(time);
+        d.setHours(t.getHours(), t.getMinutes(), 0, 0);
+    }
+    return d;
+};