how to use DateTimePicker (MUI) with YupValidation and restrict startdate to come after enddate and enddate come before startdate?

Question

This is my Current code:

import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { DateTimePicker } from "@mui/x-date-pickers";

const schema = Yup.object({
  startDate: Yup.date().required("startDate is required"),
  endDate: Yup.date().required("endDate is required"), 
});

const {
    register,
    control,
    formState: { errors },
    handleSubmit,
    reset,
    watch,
  } = useForm({
    defaultValues: {      
      startDate: "",
      endDate: "",
    },
    mode: "all",
    resolver: yupResolver(schema),
  });

 const onSubmit = (data: any) => {  
    data.startDate = new Date(data.startDate).toISOString();
    data.endDate = new Date(data.endDate).toISOString();
  };

<div className="grid grid-cols-4 ml-10 mr-56">
        <div>
          <Controller
            name="startDate"
            control={control}
            render={({ field: { onChange, value } }) => (
              <DateTimePicker
                disablePast
                id="startDate"
                label=" Start Date"
                placeholder="Start Date"
                value={value}
                onChange={onChange}
                renderInput={(params) => <TextField {...params} />}
              />
            )}
          />
        </div>
        <div>
          <Controller
            name="endDate"
            control={control}
            render={({ field: { onChange, value } }) => (
              <DateTimePicker
                disablePast
                label=" End Date"
                id="endDate"
                placeholder="End Date"
                value={value}
                onChange={onChange}
                renderInput={(params) => <TextField {...params} />}     
              />
            )}
          />
        </div>
      </div>

start & end date

(right now the validaiton works i just want to restrict the user from selecting end date before start date and vice versa)

right now i can choose date before the start date in the end date so how can i dont allow it(its important for me to make the dateformat UTC) how can i solve this problem?

i tried to change it to textField and date picker tried to use dayjs but didnt work so i dont know what to do cause i need validation too (right now the validaiton works i just want to restrict the user from selecting end date before start date and vice versa)

how to use DateTimePicker (MUI) with YupValidation and restrict startdate to come after enddate and enddate come before startdate?

0 Answers0