Updated packages. Changed date picker package to Day.JS and applied it across whole app.

This commit is contained in:
Eric Gullickson
2025-12-18 16:07:30 -06:00
parent 843825a956
commit 0e85cf48c3
17 changed files with 197 additions and 135 deletions

View File

@@ -21,8 +21,9 @@ import {
useMediaQuery,
} from '@mui/material';
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 { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs from 'dayjs';
import {
MaintenanceRecordResponse,
UpdateMaintenanceRecordRequest,
@@ -149,7 +150,7 @@ export const MaintenanceRecordEditDialog: React.FC<MaintenanceRecordEditDialogPr
}
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Dialog
open={open}
onClose={handleCancel}
@@ -221,11 +222,11 @@ export const MaintenanceRecordEditDialog: React.FC<MaintenanceRecordEditDialogPr
<Grid item xs={12} sm={6}>
<DatePicker
label="Service Date *"
value={formData.date ? new Date(formData.date) : null}
value={formData.date ? dayjs(formData.date) : null}
onChange={(newValue) =>
handleInputChange('date', newValue?.toISOString().split('T')[0] || '')
}
format="MM/dd/yyyy"
format="MM/DD/YYYY"
slotProps={{
textField: {
fullWidth: true,

View File

@@ -25,8 +25,9 @@ import {
InputAdornment,
} from '@mui/material';
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 { DatePicker } from '@mui/x-date-pickers/DatePicker';
import dayjs from 'dayjs';
import { useMaintenanceRecords } from '../hooks/useMaintenanceRecords';
import { useVehicles } from '../../vehicles/hooks/useVehicles';
import { SubtypeCheckboxGroup } from './SubtypeCheckboxGroup';
@@ -135,7 +136,7 @@ export const MaintenanceRecordForm: React.FC = () => {
}
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Card>
<CardHeader title="Add Maintenance Record" />
<CardContent>
@@ -238,11 +239,11 @@ export const MaintenanceRecordForm: React.FC = () => {
render={({ field }) => (
<DatePicker
label="Date *"
value={field.value ? new Date(field.value) : null}
value={field.value ? dayjs(field.value) : null}
onChange={(newValue) =>
field.onChange(newValue?.toISOString().split('T')[0] || '')
}
format="MM/dd/yyyy"
format="MM/DD/YYYY"
slotProps={{
textField: {
fullWidth: true,