Create Employee Change the date box into DatePicker.

src/components/Employee/ManageEmployee.jsx

@@ -18,6 +18,7 @@ import {
 import { clearApiCacheKey } from "../../slices/apiCacheSlice";
 import { useMutation } from "@tanstack/react-query";
 import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
 
 const mobileNumberRegex = /^[0-9]\d{9}$/;
 
@@ -371,41 +372,43 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
             )}
           </div>
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Birth Date</Label>
+            <Label className="form-text text-start" required>
+              Birth Date
+            </Label>
 
             <div className="input-group">
-              <input
+              <DatePicker
-                className="form-control form-control-sm"
+                name="birthDate"
-                type="date"
+                control={control} // from useForm()
-                {...register("birthDate")}
+                placeholder="DD-MM-YYYY"
-                id="birthDate"
+                maxDate={new Date()} // restrict future dates (e.g., birth date must be today or past)
+                className="w-100"
               />
             </div>
+
             {errors.birthDate && (
-              <div
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
                 {errors.birthDate.message}
               </div>
             )}
           </div>
           <div className="col-sm-4">
-            <Label className="form-text text-start" required>Joining Date</Label>
+            <Label className="form-text text-start" required>
+              Joining Date
+            </Label>
 
             <div className="input-group">
-              <input
+              <DatePicker
-                className="form-control form-control-sm"
+                name="joiningDate"
-                type="date"
+                control={control} // from useForm()
-                {...register("joiningDate")}
+                placeholder="DD-MM-YYYY"
-                id="joiningDate"
+                // For joining date, we don’t block future dates
+                className="w-100"
               />
             </div>
+
             {errors.joiningDate && (
-              <div
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
                 {errors.joiningDate.message}
               </div>
             )}