feat: date picker component show invalid dates warning (#398)

src/locale/he.json

@@ -100,6 +100,7 @@
   "bug_type_bug": "באג",
   "bug_type_feature": "בקשה לפיתוח",
   "bug_date_alert": "תאריך הסיום אינו יכול להיות מוקדם יותר מתאריך ההתחלה",
+  "bug_date_invalid_format": "נא להזין תאריך בפורמט תקין",
   "funding_paragraph": "דאטאבוס פותח בסדנא לידע ציבורי, בעבודת מתנדבים, ומבוסס על",
   "halufa_ride": "נסיעה חלופית מס",
   "all_rides_completed": "כמעט / כל הנסיעות בוצעו",

src/pages/components/DateSelector.tsx

@@ -1,18 +1,27 @@
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
 import { useTranslation } from 'react-i18next'
 import { DataAndTimeSelectorProps } from './utils/dateAndTime'
 import { DateValidationError } from '@mui/x-date-pickers'
-import styled from 'styled-components'
-
-const Error = styled.div`
-  color: 'red';
-`
 
 export function DateSelector({ time, onChange, customLabel }: DataAndTimeSelectorProps) {
   const [error, setError] = useState<DateValidationError | null>(null)
   const { t } = useTranslation()
 
+  const errorMessage = useMemo(() => {
+    switch (error) {
+      case 'maxDate':
+      case 'minDate':
+      case 'invalidDate': {
+        return t('bug_date_invalid_format')
+      }
+
+      default: {
+        return ''
+      }
+    }
+  }, [error])
+
   return (
     <>
       <DatePicker
@@ -23,8 +32,12 @@ export function DateSelector({ time, onChange, customLabel }: DataAndTimeSelecto
         label={customLabel || t('choose_date')}
         disableFuture
         onError={(err) => setError(err)}
+        slotProps={{
+          textField: {
+            helperText: errorMessage,
+          },
+        }}
       />
-      {error && <Error>{error}</Error>}
     </>
   )
 }