Update app.py

app.py

@@ -144,7 +144,51 @@ app.index_string = '''
                     --secondary-text: #8b949e;
                     --pinned-bg: #1c2128;
                     --border-color: #30363d;
+                    color-scheme: dark;
                 }
+                .ag-theme-alpine .ag-menu {
+                    background-color: #161b22 !important;
+                    color: #e6e6e6 !important;
+                    border-color: #30363d !important;
+                }
+                .ag-theme-alpine .ag-filter-condition {
+                    background-color: #161b22 !important;
+                    border-color: #30363d !important;
+                }
+                .ag-theme-alpine .ag-mini-filter input,
+                .ag-theme-alpine .ag-filter input {
+                    background-color: #0d1117 !important;
+                    color: #e6e6e6 !important;
+                    border-color: #30363d !important;
+                }
+                .ag-theme-alpine .ag-select .ag-picker-field-wrapper {
+                    background-color: #0d1117 !important;
+                    color: #e6e6e6 !important;
+                    border-color: #30363d !important;
+                }
+                .ag-theme-alpine .ag-picker-field-wrapper {
+                    border-color: #30363d !important;
+                }
+                .ag-theme-alpine .ag-select-list {
+                    background-color: #161b22 !important;
+                    color: #e6e6e6 !important;
+                }
+                .ag-theme-alpine .ag-select-list-item:hover {
+                    background-color: #1c2128 !important;
+                }
+                .ag-theme-alpine input[type="date"] {
+                    color-scheme: dark;
+                    background-color: #161b22;
+                    color: #e6e6e6;
+                    border-color: #30363d;
+                }
+                
+                .ag-theme-alpine input[type="date"]::-webkit-calendar-picker-indicator {
+                    background-color: #161b22;
+                    cursor: pointer;
+                    filter: invert(0.8);
+                }
+                
             }
             body {
                 font-family: 'Segoe UI', Arial, sans-serif;
@@ -670,25 +714,29 @@ for col in AXES_COLS_2:
 # Date Columns
 columnDefs.extend([
     {
-    "field": "Release Date",
+        "field": "Release Date",
         "width": 130,
         "filter": "agDateColumnFilter",
-        "valueFormatter": {
+        "filterParams": {
+            "defaultOption": "greaterThan",
+            "browserDatePicker": True,
+            "inRangeInclusive": True
+        },
+        "filterValueGetter": {
             "function": """
                 function(params) {
-                    if (!params.value) return '';
-                    const [year, month, day] = params.value.split('-');
-                    return `${month}/${day}/${year}`;
+                    if (!params.data['Release Date']) return null;
+                    const [year, month, day] = params.data['Release Date'].split('-');
+                    return new Date(year, month - 1, day);
                 }
             """
         },
-        "comparator": {
+        "valueFormatter": {
             "function": """
-                function(valueA, valueB) {
-                    if (!valueA && !valueB) return 0;
-                    if (!valueA) return 1;
-                    if (!valueB) return -1;
-                    return valueA.localeCompare(valueB);
+                function(params) {
+                    if (!params.value) return '';
+                    const [year, month, day] = params.value.split('-');
+                    return `${month}/${day}/${year}`;
                 }
             """
         },
@@ -702,22 +750,26 @@ columnDefs.extend([
         "field": "Test Date",
         "width": 130,
         "filter": "agDateColumnFilter",
-        "valueFormatter": {
+        "filterParams": {
+            "defaultOption": "greaterThan",
+            "browserDatePicker": True,
+            "inRangeInclusive": True
+        },
+        "filterValueGetter": {
             "function": """
                 function(params) {
-                    if (!params.value) return '';
-                    const [year, month, day] = params.value.split('-');
-                    return `${month}/${day}/${year}`;
+                    if (!params.data['Test Date']) return null;
+                    const [year, month, day] = params.data['Test Date'].split('-');
+                    return new Date(year, month - 1, day);
                 }
             """
         },
-        "comparator": {
+        "valueFormatter": {
             "function": """
-                function(valueA, valueB) {
-                    if (!valueA && !valueB) return 0;
-                    if (!valueA) return 1;
-                    if (!valueB) return -1;
-                    return valueA.localeCompare(valueB);
+                function(params) {
+                    if (!params.value) return '';
+                    const [year, month, day] = params.value.split('-');
+                    return `${month}/${day}/${year}`;
                 }
             """
         },