Fix some issues in DateTimePicker component

benjammin4dayz · Apr 30, 2024 · 71e151e · 71e151e
1 parent f5290e6
commit 71e151e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/backend/src/components/DateTimePicker.tsx b/backend/src/components/DateTimePicker.tsx
@@ -4,7 +4,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
 import { fr, enUS } from 'date-fns/locale'
 import { TextFieldVariants } from '@mui/material'
-import { DateTimeValidationError } from '@mui/x-date-pickers'
+import { DateTimeValidationError, PickersActionBarAction } from '@mui/x-date-pickers'
 
 interface DateTimePickerProps {
   value?: Date
@@ -15,6 +15,7 @@ interface DateTimePickerProps {
   language?: string
   variant?: TextFieldVariants
   readOnly?: boolean
+  showClear?: boolean
   onChange?: (value: Date | null) => void
   onError?: (error: DateTimeValidationError, value: Date | null) => void
 }
@@ -28,6 +29,7 @@ const DateTimePicker = ({
   variant,
   language,
   readOnly,
+  showClear,
   onChange,
   onError
 }: DateTimePickerProps) => {
@@ -37,6 +39,12 @@ const DateTimePicker = ({
     setValue(dateTimeValue || null)
   }, [dateTimeValue])
 
+  const actions: PickersActionBarAction[] = ['accept', 'cancel']
+
+  if (showClear) {
+    actions.push('clear')
+  }
+
   return (
     <LocalizationProvider adapterLocale={language === 'fr' ? fr : enUS} dateAdapter={AdapterDateFns}>
       <MuiDateTimePicker
@@ -50,8 +58,15 @@ const DateTimePicker = ({
             onChange(_value)
           }
 
-          if (_value && minDate && _value < minDate && onError) {
-            onError('minDate', _value)
+          if (_value && minDate) {
+            const val = new Date(_value)
+            val.setHours(0, 0, 0, 0)
+            const min = new Date(minDate)
+            min.setHours(0, 0, 0, 0)
+
+            if (val < min && onError) {
+              onError('minDate', _value)
+            }
           }
         }}
         onError={onError}
@@ -64,7 +79,7 @@ const DateTimePicker = ({
             required,
           },
           actionBar: {
-            actions: ['accept', 'cancel', 'clear'],
+            actions,
           },
         }}
       />

diff --git a/backend/src/pages/CreateBooking.tsx b/backend/src/pages/CreateBooking.tsx
@@ -321,6 +321,7 @@ const CreateBooking = () => {
                 label={commonStrings.FROM}
                 value={from}
                 maxDate={maxDate}
+                showClear
                 required
                 onChange={(date) => {
                   if (date) {
@@ -350,6 +351,7 @@ const CreateBooking = () => {
                 label={commonStrings.TO}
                 value={to}
                 minDate={minDate}
+                showClear
                 required
                 onChange={(date) => {
                   if (date) {

diff --git a/backend/src/pages/UpdateBooking.tsx b/backend/src/pages/UpdateBooking.tsx
@@ -576,6 +576,7 @@ const UpdateBooking = () => {
                   label={commonStrings.FROM}
                   value={from}
                   maxDate={maxDate}
+                  showClear
                   required
                   onChange={(date) => {
                     if (date) {
@@ -618,6 +619,7 @@ const UpdateBooking = () => {
                   label={commonStrings.TO}
                   value={to}
                   minDate={minDate}
+                  showClear
                   required
                   onChange={(date) => {
                     if (date) {

diff --git a/frontend/src/components/DateTimePicker.tsx b/frontend/src/components/DateTimePicker.tsx
@@ -4,7 +4,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { DateTimePicker as MuiDateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
 import { fr, enUS } from 'date-fns/locale'
 import { TextFieldVariants } from '@mui/material'
-import { DateTimeValidationError } from '@mui/x-date-pickers'
+import { DateTimeValidationError, PickersActionBarAction } from '@mui/x-date-pickers'
 
 interface DateTimePickerProps {
   value?: Date
@@ -15,6 +15,7 @@ interface DateTimePickerProps {
   language?: string
   variant?: TextFieldVariants
   readOnly?: boolean
+  showClear?: boolean
   onChange?: (value: Date | null) => void
   onError?: (error: DateTimeValidationError, value: Date | null) => void
 }
@@ -28,6 +29,7 @@ const DateTimePicker = ({
   variant,
   language,
   readOnly,
+  showClear,
   onChange,
   onError
 }: DateTimePickerProps) => {
@@ -37,6 +39,12 @@ const DateTimePicker = ({
     setValue(dateTimeValue || null)
   }, [dateTimeValue])
 
+  const actions: PickersActionBarAction[] = ['accept', 'cancel']
+
+  if (showClear) {
+    actions.push('clear')
+  }
+
   return (
     <LocalizationProvider adapterLocale={language === 'fr' ? fr : enUS} dateAdapter={AdapterDateFns}>
       <MuiDateTimePicker
@@ -50,8 +58,15 @@ const DateTimePicker = ({
             onChange(_value)
           }
 
-          if (_value && minDate && _value < minDate && onError) {
-            onError('minDate', _value)
+          if (_value && minDate) {
+            const val = new Date(_value)
+            val.setHours(0, 0, 0, 0)
+            const min = new Date(minDate)
+            min.setHours(0, 0, 0, 0)
+
+            if (val < min && onError) {
+              onError('minDate', _value)
+            }
           }
         }}
         onError={onError}
@@ -64,7 +79,7 @@ const DateTimePicker = ({
             required,
           },
           actionBar: {
-            actions: ['accept', 'cancel', 'clear'],
+            actions,
           },
         }}
       />