src/components/Project/ManageProjectInfo.jsx

@@ -3,6 +3,7 @@ import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
 
 const currentDate = new Date().toLocaleDateString('en-CA');
 const formatDate = (date) => {
@@ -214,42 +215,42 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
           <label className="form-label" htmlFor="startDate">
             Start Date
           </label>
-          <input
+
-            className="form-control form-control-sm"
+          <DatePicker
-            type="date"
             name="startDate"
-            {...register("startDate")}
+            control={control}
-            id="startDate"
+            placeholder="DD-MM-YYYY"
+            maxDate={new Date()} // optional: restrict future dates
+            className="w-100"
           />
+
           {errors.startDate && (
-            <div
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
               {errors.startDate.message}
             </div>
           )}
         </div>
+
         <div className="col-12 col-md-6">
           <label className="form-label" htmlFor="endDate">
             End Date
           </label>
-          <input
+
-            className="form-control form-control-sm"
+          <DatePicker
-            type="date"
             name="endDate"
-            {...register("endDate")}
+            control={control}
-            id="endDate"
+            placeholder="DD-MM-YYYY"
+           minDate={getValues("startDate")} // optional: restrict future dates
+            className="w-100"
           />
+
           {errors.endDate && (
-            <div
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
               {errors.endDate.message}
             </div>
           )}
         </div>
+
         <div className="col-12 col-md-6">
           <label className="form-label" htmlFor="modalEditUserStatus">
             Status

src/components/common/DatePicker.jsx

@@ -8,7 +8,7 @@ const DatePicker = ({
   placeholder = "DD-MM-YYYY",
   className = "",
   allowText = false,
-  maxDate=new Date(),
+  maxDate,   // removed default new Date()
   minDate,
   ...rest
 }) => {
@@ -29,15 +29,21 @@ const DatePicker = ({
         defaultDate: value
           ? flatpickr.parseDate(value, "Y-m-d")
           : null,
-        maxDate:maxDate,
+        maxDate: maxDate ?? undefined, // only applied if passed
-        minDate:new Date(minDate?.split("T")[0]) ?? undefined,
+        minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
-        onChange: function (selectedDates, dateStr) {
+        onChange: function (selectedDates) {
-          onChange(dateStr); 
+          if (selectedDates.length > 0) {
+            // store in YYYY-MM-DD
+            const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
+            onChange(formatted);
+          } else {
+            onChange("");
+          }
         },
         ...rest
       });
     }
-  }, [inputRef]);
+  }, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
 
   return (
     <div className={` position-relative ${className}`}>
@@ -45,8 +51,13 @@ const DatePicker = ({
         type="text"
         className="form-control form-control-sm " 
         placeholder={placeholder}
-          defaultValue={
+        defaultValue={
-          value ? flatpickr.formatDate(flatpickr.parseDate(value, "Y-m-d"), "d-m-Y") : ""
+          value
+            ? flatpickr.formatDate(
+                flatpickr.parseDate(value, "Y-m-d"),
+                "d-m-Y"
+              )
+            : ""
         }
         ref={(el) => {
           inputRef.current = el;