Date filter

package.json

@@ -19,8 +19,10 @@
     "internal-nav-helper": "^3.1.0",
     "money-clip": "^3.0.5",
     "react": "^18.2.0",
+    "react-calendar": "^5.1.0",
     "react-colorful": "^5.5.1",
-    "react-datepicker": "^4.7.0",
+    "react-date-picker": "^11.0.0",
+    "react-datepicker": "^4.25.0",
     "react-dom": "^18.2.0",
     "react-select": "^5.2.2",
     "redux-bundler": "^28.0.3",

src/app-bundles/product-bundle.js

@@ -3,6 +3,8 @@ import { createSelector } from 'redux-bundler';
 import { getMonth, getYear, isAfter, isBefore } from 'date-fns';
 
 const apiUrl = process.env.REACT_APP_CUMULUS_API_URL;
+const cumulusBegin = new Date('01-Jan-1980');
+const MAX_DATE = new Date('01-Jan-3000');
 
 export default createRestBundle({
   name: 'product',
@@ -114,27 +116,33 @@ export default createRestBundle({
     selectProductDateRangeFrom: createSelector(
       'selectProductItemsArray',
       (items) => {
-        let out = new Date('01-Jan-3000');
+        let out = MAX_DATE;
         items.forEach((p) => {
           if (p.productfile_count > 0) {
             const d = new Date(p.after);
             if (isBefore(d, out)) out = d;
           }
         });
+        if (out.getTime() === MAX_DATE.getTime()) {
+          out = cumulusBegin;
+        }
         return out;
       }
     ),
 
     selectProductDateRangeTo: createSelector(
       'selectProductItemsArray',
       (items) => {
-        let out = new Date('01-Jan-1980');
+        let out = cumulusBegin;
         items.forEach((p) => {
           if (p.productfile_count > 0) {
             const d = new Date(p.before);
             if (isAfter(d, out)) out = d;
           }
         });
+        if (out.getTime() === cumulusBegin.getTime()) {
+          out = new Date();
+        }
         return out;
       }
     ),

src/app-pages/products/DatePickerOverrides.css

@@ -0,0 +1,114 @@
+/* src/DatePickerOverrides.css */
+
+.calendar-only .react-date-picker__inputGroup:hover {
+    color: #0078d4;
+}
+.calendar-only .react-date-picker__calendar-button:hover {
+    color: #0078d4;
+}
+
+.calendar-only .react-date-picker__clear-button {
+    display: none;
+}
+.calendar-only .react-date-picker__wrapper--with-border {
+    border: 1px solid #b3b3b3;
+    border-radius: 5px;
+    padding: 0;
+    margin: 3px;
+}
+
+.calendar-only .react-date-picker__wrapper{
+    border: none;
+    padding: 0;
+}
+
+.my-picker-wrapper .react-calendar {
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+    font-family: 'Segoe UI', Roboto, sans-serif;
+    background-color: #ffffff;
+}
+
+.my-picker-wrapper .react-calendar__navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 0; /* Ensure no gap between navigation and weekdays */
+}
+
+.my-picker-wrapper .react-calendar__navigation button {
+    background: none;
+    border: none;
+    color: #333;
+    font-size: 16px;
+    cursor: pointer;
+    padding: 5px 10px;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+}
+
+.my-picker-wrapper .react-calendar__navigation button:hover {
+    background-color: #e0e0e0;
+    color: #0078d4;
+    outline: 2px solid #0078d4;
+    outline-offset: -2px;
+    fill: #0078d4;
+}
+
+.my-picker-wrapper .react-calendar__month-view__weekdays {
+    text-align: center;
+    font-weight: bold;
+    color: #666;
+    background-color: #f9f9f9;
+    padding: 10px 0;
+    border-bottom: 1px solid #e0e0e0;
+    text-underline-offset: 100px;
+}
+
+.my-picker-wrapper .react-calendar__tile {
+    text-align: center;
+    padding: 10px;
+    background: none;
+    border: none;
+    font-size: 14px;
+    color: #333;
+    border-radius: 4px;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.my-picker-wrapper .react-calendar__tile:hover {
+    background-color: #e0e0e0;
+    color: #0078d4;
+    outline: 2px solid #0078d4;
+    outline-offset: -3px;
+}
+
+.my-picker-wrapper .react-calendar__tile--active {
+    background-color: #e0e0e0;
+    color: #0078d4;
+    outline: 2px solid #0078d4;
+    outline-offset: -3px;
+    font-weight: bold;
+}
+
+.my-picker-wrapper .react-calendar__tile--now {
+    background-color: #f0f8ff;
+    color: #0078d4;
+    font-weight: bold;
+}
+
+.my-picker-wrapper .react-calendar__tile--now:hover {
+    background-color: #d0e8ff;
+    color: #005a9e;
+}
+
+.my-picker-wrapper .react-calendar__tile--disabled {
+    color: #ccc;
+    background-color: #f9f9f9;
+    cursor: not-allowed;
+}