Replace existing date picker with react-datepicker component

Author: handikaharianto

src/components/JobCCDashboard/JobAnalytics/JobAnalytics.jsx

@@ -40,6 +40,8 @@ import {
 import styles from './JobAnalytics.module.css';
 import hasPermission from '../../../utils/permissions';
 import { ENDPOINTS } from '../../../utils/URL';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 
 const ROLE_OPTIONS = [
   'All Roles',
@@ -151,6 +153,8 @@ function useMediaQuery(query) {
   return matches;
 }
 
+const toIsoDate = d => d.toISOString().split('T')[0];
+
 // ======================== API SERVICE ========================
 // ======================== API SERVICE ========================
 class AnalyticsService {
@@ -598,10 +602,48 @@ function DateRangeSelector({ dateRange, setDateRange, comparisonPeriod, setCompa
           </div>
         </div>
 
-        <div className={styles['selector-col']}>
+        <div className={''}>
           <label className={styles['label']}>Custom Date Range</label>
           <div className={styles['dates-row']}>
-            <input
+            <DatePicker
+              selected={dateRange?.start ? new Date(dateRange.start) : null}
+              onChange={date => {
+                setDateRange({
+                  ...dateRange,
+                  start: date ? toIsoDate(date) : '',
+                });
+                setActive(null);
+              }}
+              selectsStart
+              startDate={dateRange?.start || null}
+              dateFormat="yyyy-MM-dd"
+              isClearable
+              placeholderText="Start date"
+              className={styles.input}
+              // wrapperClassName={styles.datePicker}
+              // calendarClassName={styles.calendar}
+            />
+            <span className={styles['to']}>to</span>
+            <DatePicker
+              selected={dateRange?.end ? new Date(dateRange.end) : null}
+              onChange={date => {
+                setDateRange({
+                  ...dateRange,
+                  end: date ? toIsoDate(date) : '',
+                });
+                setActive(null);
+              }}
+              selectsEnd
+              endDate={dateRange?.end || null}
+              dateFormat="yyyy-MM-dd"
+              minDate={dateRange?.start ? new Date(dateRange.start) : undefined}
+              isClearable
+              placeholderText="End date"
+              className={styles.input}
+              // wrapperClassName={styles.datePicker}
+              // calendarClassName={styles.calendar}
+            />
+            {/* <input
               type="date"
               className={styles['input']}
               value={dateRange?.start || ''}
@@ -619,7 +661,7 @@ function DateRangeSelector({ dateRange, setDateRange, comparisonPeriod, setCompa
                 setDateRange({ ...dateRange, end: e.target.value });
                 setActive(null);
               }}
-            />
+            /> */}
           </div>
         </div>
 

src/components/JobCCDashboard/JobAnalytics/JobAnalytics.module.css

@@ -179,6 +179,20 @@
   filter: invert(1);
 }
 
+.datePicker {
+  padding: 10px 14px;
+  border-radius: 8px;
+  color: #111827;
+  font-size: 0.875rem;
+}
+
+.react-datepicker__close-icon::after {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: red!;
+}
+
 /* Spin animation for refresh icon */
 .spin {
   animation: spin 1s linear infinite;
@@ -313,13 +327,14 @@
 
 .dates-row {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
 }
 
 
 .to {
   color: #6b7280;
+  margin-inline: 8px;
 }
 
 .darkMode .to {
@@ -671,4 +686,11 @@
 /* Charts Grid Stroke */
 .grid-stroke line {
   stroke: var(--grid-stroke) !important;
-}
+}
+
+/* .calendar {
+  .react-datepicker__navigation-icon {
+    background-color: red;
+    color: blue;
+  }
+} */