From 0253b06018e331f70c2a8df6a18f65a8ae81a191 Mon Sep 17 00:00:00 2001 From: AmirHossein Mahmoodi Date: Tue, 2 Sep 2025 10:09:00 +0330 Subject: [PATCH] fixed min and max datetimes --- .../Form/GetDateTime/MissionDates/index.jsx | 24 ++++++++++++++++++- .../Form/GetDateTime/MissionDates/index.jsx | 19 ++++++++++++++- src/core/components/MuiDatePicker.jsx | 4 ++-- src/core/utils/makeDateTime.js | 9 +++++++ 4 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 src/core/utils/makeDateTime.js diff --git a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetDateTime/MissionDates/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetDateTime/MissionDates/index.jsx index a2b5c07..2f6dc34 100644 --- a/src/components/dashboard/roadMissions/operator/Actions/Create/Form/GetDateTime/MissionDates/index.jsx +++ b/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 && ( <> { 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)} diff --git a/src/components/dashboard/roadMissions/operator/Actions/CreateWithoutProcess/Form/GetDateTime/MissionDates/index.jsx b/src/components/dashboard/roadMissions/operator/Actions/CreateWithoutProcess/Form/GetDateTime/MissionDates/index.jsx index 35cca49..312d6dc 100644 --- a/src/components/dashboard/roadMissions/operator/Actions/CreateWithoutProcess/Form/GetDateTime/MissionDates/index.jsx +++ b/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 ( <> @@ -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)} diff --git a/src/core/components/MuiDatePicker.jsx b/src/core/components/MuiDatePicker.jsx index cb2abc5..b97bf88 100644 --- a/src/core/components/MuiDatePicker.jsx +++ b/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 ( <> @@ -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) => { diff --git a/src/core/utils/makeDateTime.js b/src/core/utils/makeDateTime.js new file mode 100644 index 0000000..c3beb21 --- /dev/null +++ b/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; +}; \ No newline at end of file