fixed min and max datetimes
This commit is contained in:
@@ -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)}
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
9
src/core/utils/makeDateTime.js
Normal file
9
src/core/utils/makeDateTime.js
Normal 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;
|
||||
};
|
||||
Reference in New Issue
Block a user