Introduce new date input props and update docs.

Author: iM-GeeKy

docusaurus/docs/date-picker/input-date-picker.md

@@ -63,4 +63,20 @@ The type of input needed for the the picker component.
 `Type: 'flat' | 'outlined'`  
 See [react-native-paper text-input](https://callstack.github.io/react-native-paper/text-input.html#mode).
 
+**withDateFormatInLabel**
+`Type: boolean | undefined`  
+Flag indicating if the date format should be inside the components label.
+
+**hasError**  
+`Type: boolean | undefined`  
+Flag indicating if the the component should display error styles.
+
+**hideValidationErrors**  
+`Type: boolean | undefined`  
+Flag indicating if the the component should hide error styles along with the `helperText` component displaying the error message.
+
+**onValidationError**  
+`Type: Function | undefined`  
+Callback used to return any error messages from the components validation.
+
 * Other [react-native TextInput props](https://reactnative.dev/docs/textinput#props).*

src/Date/DatePickerInput.shared.tsx

@@ -10,6 +10,9 @@ export type DatePickerInputProps = {
   validRange?: ValidRangeType | undefined
   withModal?: boolean
   withDateFormatInLabel?: boolean
+  hideValidationErrors?: boolean
+  hasError?: boolean
+  onValidationError?: ((error: string) => void) | undefined
   calendarIcon?: string
   saveLabel?: string
 } & Omit<

src/Date/DatePickerInputWithoutModal.tsx

@@ -16,6 +16,9 @@ function DatePickerInputWithoutModal(
     validRange,
     inputMode,
     withDateFormatInLabel = true,
+    hasError,
+    hideValidationErrors,
+    onValidationError,
     modal,
     inputButtons,
     saveLabel,
@@ -39,6 +42,7 @@ function DatePickerInputWithoutModal(
     validRange,
     inputMode,
     onChange,
+    onValidationError,
   })
 
   return (
@@ -56,16 +60,15 @@ function DatePickerInputWithoutModal(
             })}
             value={formattedValue}
             keyboardType={'number-pad'}
-            placeholder={inputFormat}
             mask={inputFormat}
             onChangeText={onChangeText}
             keyboardAppearance={theme.dark ? 'dark' : 'default'}
-            error={!!error}
+            error={(!!error && !hideValidationErrors) || !!hasError}
             style={[styles.input, style]}
           />
           {inputButtons}
         </View>
-        {error ? (
+        {error && !hideValidationErrors ? (
           <HelperText style={styles.helperText} type="error" visible={!!error}>
             {error}
           </HelperText>

src/Date/inputUtils.ts

@@ -9,12 +9,14 @@ export default function useDateInput({
   validRange,
   inputMode,
   onChange,
+  onValidationError,
 }: {
   onChange: (d: Date) => void
   locale: undefined | string
   value: Date | undefined
   validRange: ValidRangeType | undefined
   inputMode: 'start' | 'end'
+  onValidationError?: ((error: string) => void) | undefined
 }) {
   const { isDisabled, isWithinValidRange, validStart, validEnd } =
     useRangeChecker(validRange)
@@ -35,13 +37,13 @@ export default function useDateInput({
     const month = Number(date.slice(monthIndex, monthIndex + 2))
 
     if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {
-      setError(
-        getTranslation(
-          locale,
-          'notAccordingToDateFormat',
-          () => 'notAccordingToDateFormat'
-        )(inputFormat)
-      )
+      const inputError = getTranslation(
+        locale,
+        'notAccordingToDateFormat',
+        () => 'notAccordingToDateFormat'
+      )(inputFormat)
+      setError(inputError)
+      onValidationError(inputError)
       return
     }
 
@@ -51,7 +53,9 @@ export default function useDateInput({
         : new Date(year, month - 1, day)
 
     if (isDisabled(finalDate)) {
-      setError(getTranslation(locale, 'dateIsDisabled'))
+      const inputError = getTranslation(locale, 'dateIsDisabled')
+      setError(inputError)
+      onValidationError(inputError)
       return
     }
     if (!isWithinValidRange(finalDate)) {
@@ -80,11 +84,14 @@ export default function useDateInput({
                   )(formatter.format(validEnd))
                 : '',
             ]
+      const inputError = errors.filter((n) => n).join(' ')
       setError(errors.filter((n) => n).join(' '))
+      onValidationError(inputError)
       return
     }
 
     setError(null)
+    onValidationError(null)
     if (inputMode === 'end') {
       onChange(finalDate)
     } else {