fixed min and max datetimes

This commit is contained in:
AmirHossein Mahmoodi
2025-09-02 10:09:00 +03:30
parent 1f585fe18e
commit 0253b06018
4 changed files with 52 additions and 4 deletions

View File

@@ -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)}

View File

@@ -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)}

View File

@@ -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) => {

View File

@@ -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;
};