Fixing datetimepicker package conflict

usdot-jpo-ode · Nov 1, 2024 · 1d6094d · 1d6094d
1 parent 5545da4
commit 1d6094d
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 148 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -13,7 +13,7 @@
     "@mui/material": "^5.15.19",
     "@mui/styled-engine-sc": "^5.11.9",
     "@mui/styles": "^5.15.19",
-    "@mui/x-date-pickers": "^5.0.15",
+    "@mui/x-date-pickers": "^6.20.2",
     "@react-keycloak/web": "3.4.0",
     "@react-oauth/google": "^0.2.8",
     "@reduxjs/toolkit": "^1.9.1",
@@ -35,7 +35,7 @@
     "jest-fetch-mock": "^3.0.3",
     "jszip": "^3.10.1",
     "keycloak-js": "21.1.1",
-    "luxon": "^2.3.2",
+    "luxon": "^3.5.0",
     "mapbox-gl": "^2.9.1",
     "rc-slider": "^10.1.0",
     "react": "^17.0.2",

diff --git a/webapp/src/features/intersections/data-selector/data-selector-edit-form.tsx b/webapp/src/features/intersections/data-selector/data-selector-edit-form.tsx
@@ -4,7 +4,7 @@ import * as Yup from 'yup'
 import { useFormik } from 'formik'
 import dayjs from 'dayjs'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
 
 import {
@@ -238,16 +238,8 @@ export const DataSelectorEditForm = (props: {
               </Select>
             </Grid>
             <Grid item md={4} xs={12}>
-              <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
                 <DateTimePicker
-                  renderInput={(props) => (
-                    <TextField
-                      {...props}
-                      error={Boolean(formik.touched.startDate && formik.errors.startDate)}
-                      name="startDate"
-                      label="Start Date"
-                    />
-                  )}
                   value={formik.values.startDate}
                   onChange={(e) => formik.setFieldValue('startDate', e as Date | null, true)}
                 />

diff --git a/webapp/src/features/intersections/map/control-panel.tsx b/webapp/src/features/intersections/map/control-panel.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, ChangeEvent, useMemo } from 'react'
 import Slider from '@mui/material/Slider'
 import dayjs from 'dayjs'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
 import {
   Box,
@@ -440,15 +440,14 @@ function ControlPanel() {
                 value={timeBefore}
               />
               <div style={{ marginTop: '9px', display: 'inline-flex' }}>
-                <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <LocalizationProvider dateAdapter={AdapterDayjs}>
                   <DateTimePicker
                     label="Event Date"
                     disabled={liveDataActive}
                     value={dayjs(eventTime ?? new Date())}
                     onChange={(e) => {
                       setEventTime(e)
                     }}
-                    renderInput={(params) => <TextField {...params} />}
                   />
                 </LocalizationProvider>
               </div>

diff --git a/webapp/src/features/intersections/reports/report-list-filters.tsx b/webapp/src/features/intersections/reports/report-list-filters.tsx
@@ -4,7 +4,7 @@ import { Box, Button, CircularProgress, Drawer, IconButton, Stack, TextField, Ty
 import { styled } from '@mui/material/styles'
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
 import { Close } from '@mui/icons-material'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 
@@ -102,21 +102,9 @@ export const ReportListFilters = (props: ReportListFiltersProps) => {
         Issue date
       </Typography>
       <Stack spacing={2} sx={{ mt: 2 }}>
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <DateTimePicker
-            label="From"
-            onChange={startDateChange}
-            renderInput={(inputProps) => <TextField {...inputProps} />}
-            value={currentFilters.startDate}
-            disabled={loading}
-          />
-          <DateTimePicker
-            label="To"
-            onChange={endDateChange}
-            renderInput={(inputProps) => <TextField {...inputProps} />}
-            value={currentFilters.endDate}
-            disabled={loading}
-          />
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <DateTimePicker label="From" onChange={startDateChange} value={currentFilters.startDate} disabled={loading} />
+          <DateTimePicker label="To" onChange={endDateChange} value={currentFilters.endDate} disabled={loading} />
         </LocalizationProvider>
       </Stack>
       {!filtersValid[0] && (