Implemented React Datepicker for formatted date display ('Jan 2020 to…

… Dec 2023')

frontend/package.json

@@ -12,6 +12,7 @@
     "axios": "^1.7.2",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
+    "react-datepicker": "^7.2.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",

frontend/src/components/Form/ImageSection/ImageSection.jsx

@@ -1,4 +1,9 @@
-import {formStyles as styles, imageSectionStyles as styles1, handleChange, UserSvg} from '../imports'
+import {
+  formStyles as styles,
+  imageSectionStyles as styles1,
+  handleChange,
+  UserSvg,
+} from "../imports";
 
 const ImageSection = ({ setProfileInfo, socialLinks, setSocialLinks }) => {
   return (
@@ -34,34 +39,34 @@ const ImageSection = ({ setProfileInfo, socialLinks, setSocialLinks }) => {
         />
       </div>
       <div className={styles.genderSection}>
-        <label>
+        <label className={styles1.radioLabel}>
           <input
             type="radio"
             name="gender"
             value="male"
             onChange={(e) => handleChange(e, setProfileInfo)}
             required
-          />{" "}
+          />
           Male
         </label>
-        <label>
+        <label className={styles1.radioLabel}>
           <input
             type="radio"
             name="gender"
             value="female"
             onChange={(e) => handleChange(e, setProfileInfo)}
             required
-          />{" "}
+          />
           Female
         </label>
-        <label>
+        <label className={styles1.radioLabel}>
           <input
             type="radio"
             name="gender"
             value="other"
             onChange={(e) => handleChange(e, setProfileInfo)}
             required
-          />{" "}
+          />
           Other
         </label>
       </div>

frontend/src/components/Form/ImageSection/ImageSection.module.css

@@ -9,6 +9,26 @@
   font-family: Poppins;
 }
 
+.radioLabel {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: var(--text-color);
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.radioLabel:hover {
+  background-color: var(--button-bg-color);
+}
+
+.radioLabel input[type="radio"] {
+  margin-right: 8px;
+  accent-color: var(--primary-color);
+}
+
 /* Mobile screens */
 @media (max-width: 800px) {
   .uploadButton {

frontend/src/components/Form/WorkHistory/WorkHistory.jsx

@@ -1,4 +1,5 @@
-import {formStyles as styles, workHistoryStyles as styles1, FiInfo,FiTrash2, Tooltip} from '../imports'
+import { formStyles as styles, workHistoryStyles as styles1, FiInfo, FiTrash2, Tooltip, DatePicker, } from "../imports";
+import "react-datepicker/dist/react-datepicker.css";
 
 const WorkHistory = ({
   isDisabled,
@@ -22,6 +23,30 @@ const WorkHistory = ({
     setWorkHistoryFields(updatedFields);
   };
 
+  const handleDateChange = (dates, index) => {
+    const [start, end] = dates;
+    const startDateString = start
+      ? start.toLocaleDateString("en-US", { month: "short", year: "numeric" })
+      : "";
+    const endDateString = end
+      ? end.toLocaleDateString("en-US", { month: "short", year: "numeric" })
+      : "";
+    const employmentDates = `${startDateString} To ${endDateString}`;
+
+    const updatedFields = [...workHistoryFields];
+    updatedFields[index].employmentDates = employmentDates;
+    setWorkHistoryFields(updatedFields);
+  };
+
+  const parseEmploymentDates = (employmentDates) => {
+    if (!employmentDates || typeof employmentDates !== "string")
+      return [null, null];
+    const dates = employmentDates.split(" To ");
+    const start = dates[0] ? new Date(dates[0]) : null;
+    const end = dates[1] ? new Date(dates[1]) : null;
+    return [start, end];
+  };
+
   return (
     <div className={styles.workHistory}>
       <div className={styles.header}>
@@ -83,19 +108,21 @@ const WorkHistory = ({
               />
             </div>
             <div className={styles.inputRow}>
-              <input
+              <DatePicker
                 type="text"
-                placeholder="Employment Dates (e.g., Jan 2020 to Dec 2023)"
+                selectsRange
+                startDate={parseEmploymentDates(field.employmentDates)[0]}
+                endDate={parseEmploymentDates(field.employmentDates)[1]}
+                onChange={(dates) => handleDateChange(dates, index)}
+                disabled={isDisabled}
+                dateFormat="MMM yyyy"
                 className={`${styles.inputField} ${
                   isDisabled ? styles.disabledInput : ""
                 }`}
                 value={field.employmentDates}
-                disabled={isDisabled}
-                onChange={(e) => {
-                  const updatedFields = [...workHistoryFields];
-                  updatedFields[index].employmentDates = e.target.value;
-                  setWorkHistoryFields(updatedFields);
-                }}
+                placeholderText="Select Employment Dates"
+                showMonthYearPicker
+                showFullMonthYearPicker
               />
               <input
                 type="text"

frontend/src/components/Form/imports/index.js

@@ -42,3 +42,4 @@ export { default as professionalInfoStyles } from "../ProfessionalInfo/Professio
 
 // For ../WorkHistory/WorkHistory.jsx
 export { default as workHistoryStyles } from "../WorkHistory/WorkHistory.module.css";
+export { default as DatePicker } from 'react-datepicker';