handle disable time before start_time

app/component/TimePickerInput.js

@@ -3,7 +3,7 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
 import { handleTwoLength } from "@/helper";
 
-function TimePickerInput({ changeData, name, data }) {
+function TimePickerInput({ changeData, handleDisableHours, name, data }) {
   return (
     <div className="w-full relative">
       <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -13,6 +13,7 @@ function TimePickerInput({ changeData, name, data }) {
           className="!w-full"
           views={["hours", "minutes"]}
           placeholder="انتخاب کنید..."
+          shouldDisableTime={(e) => handleDisableHours(e, name)}
           onChange={(e) => {
             const hours = e.$H;
             const minute = e.$m;
@@ -49,7 +50,7 @@ function TimePickerInput({ changeData, name, data }) {
           className="absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
             w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2"
         >
-          {data}
+          {data[name]}
         </p>
       </LocalizationProvider>
     </div>

components/panel/addDoctor/listMenu/specialDays/Form.js

@@ -27,7 +27,19 @@ function Form() {
       ...data,
       [name]: value,
     });
-  console.log(data);
+
+  const handleDisableHours = (e, n) => {
+    if (data.start_time === "00:00" && n === "end_time") return true;
+    if (data.start_time !== "00:00" && n === "end_time") {
+      const hourSelected = data.start_time
+        ? +data.start_time.split(":")[0]
+        : false;
+
+      const hours = e.$H;
+      return hourSelected + 1 > hours;
+    }
+  };
+  // console.log(data);
 
   return (
     <div className="flex flex-col w-full-content">
@@ -62,20 +74,22 @@ function Form() {
         </ContentText>
         <ContentText text="زمان شروع">
           <TimePickerInput
+            handleDisableHours={handleDisableHours}
             placeholder="انتخاب کنید..."
             changeData={changeData}
-            data={data.start_time}
             icon={<ClockP />}
             name="start_time"
+            data={data}
           />
         </ContentText>
         <ContentText text="زمان پایان">
           <TimePickerInput
+            handleDisableHours={handleDisableHours}
             placeholder="انتخاب کنید..."
             changeData={changeData}
-            data={data.end_time}
             icon={<ClockP />}
             name="end_time"
+            data={data}
           />
         </ContentText>
         <Button