feat: also check valid range in input mode + show errors

Author: RichardLindhout

README.md

@@ -90,6 +90,10 @@ export default function ReadMeExampleSingle() {
         onDismiss={onDismissSingle}
         date={date}
         onConfirm={onConfirmSingle}
+        // validRange={{
+        //   startDate: new Date(2021, 1, 2),  // optional
+        //   endDate: new Date(), // optional
+        // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // saveLabel="Save" // optional
         // label="Select date" // optional
@@ -140,6 +144,10 @@ export default function ReadMeExampleRange() {
         startDate={range.startDate}
         endDate={range.endDate}
         onConfirm={onConfirm}
+        // validRange={{
+        //   startDate: new Date(2021, 1, 2),  // optional
+        //   endDate: new Date(), // optional
+        // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // locale={'nl'} // optional
         // saveLabel="Save" // optional
@@ -189,6 +197,10 @@ export default function ReadMeExampleMultiple() {
         onDismiss={onDismiss}
         dates={dates}
         onConfirm={onConfirm}
+        // validRange={{
+        //   startDate: new Date(2021, 1, 2),  // optional
+        //   endDate: new Date(), // optional
+        // }}
         // locale={'nl'} // optional
         // saveLabel="Save" // optional
         // label="Select period" // optional

example/src/AppInner.tsx

@@ -321,6 +321,10 @@ function AppInner({
         onDismiss={onDismissSingle}
         date={date}
         onConfirm={onChangeSingle}
+        validRange={{
+          startDate: new Date(2021, 1, 2),
+          // endDate: new Date(),
+        }}
         // saveLabel="Save" // optional
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web

example/src/ReadMeExampleMultiple.tsx

@@ -30,6 +30,10 @@ export default function ReadMeExampleMultiple() {
         onDismiss={onDismiss}
         dates={dates}
         onConfirm={onConfirm}
+        // validRange={{
+        //   startDate: new Date(2021, 1, 2),  // optional
+        //   endDate: new Date(), // optional
+        // }}
         // locale={'nl'} // optional
         // saveLabel="Save" // optional
         // label="Select period" // optional

example/src/ReadMeExampleRange.tsx

@@ -36,6 +36,10 @@ export default function ReadMeExampleRange() {
         startDate={range.startDate}
         endDate={range.endDate}
         onConfirm={onConfirm}
+        // validRange={{
+        //   startDate: new Date(2021, 1, 2),  // optional
+        //   endDate: new Date(), // optional
+        // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // locale={'nl'} // optional
         // saveLabel="Save" // optional

example/src/ReadMeExampleSingle.tsx

@@ -30,6 +30,10 @@ export default function ReadMeExampleSingle() {
         onDismiss={onDismissSingle}
         date={date}
         onConfirm={onConfirmSingle}
+        // validRange={{
+        //   startDate: new Date(2021, 1, 2),  // optional
+        //   endDate: new Date(), // optional
+        // }}
         // onChange={} // same props as onConfirm but triggered without confirmed by user
         // saveLabel="Save" // optional
         // label="Select date" // optional

src/Date/Calendar.tsx

@@ -9,7 +9,6 @@ import {
   dateToUnix,
   DisableWeekDaysType,
   getInitialIndex,
-  isDateWithinOptionalRange,
 } from './dateUtils'
 
 import CalendarHeader from './CalendarHeader'
@@ -124,20 +123,9 @@ function Calendar(
     onChange
   )
   const datesRef = useLatest<CalendarDates>(dates)
-  const validRangeStart = useLatest(validRange?.startDate)
-  const validRangeEnd = useLatest(validRange?.endDate)
 
   const onPressDate = useCallback(
     (d: Date) => {
-      const isWithinValidRange = isDateWithinOptionalRange(d, {
-        startDate: validRangeStart.current,
-        endDate: validRangeEnd.current,
-      })
-
-      if (!isWithinValidRange) {
-        return
-      }
-
       if (mode === 'single') {
         ;(onChangeRef.current as SingleChange)({
           date: d,
@@ -171,15 +159,7 @@ function Calendar(
         })
       }
     },
-    [
-      validRangeStart,
-      validRangeEnd,
-      mode,
-      onChangeRef,
-      startDateRef,
-      endDateRef,
-      datesRef,
-    ]
+    [mode, onChangeRef, startDateRef, endDateRef, datesRef]
   )
 
   const firstDate = startDate || date || dates?.[0]

src/Date/CalendarEdit.tsx

@@ -6,10 +6,11 @@ import {
   Keyboard,
 } from 'react-native'
 
-import { CalendarDate, ModeType } from './Calendar'
+import { CalendarDate, ModeType, ValidRangeType } from './Calendar'
 import { LocalState } from './DatePickerModalContent'
 import TextInputWithMask from '../TextInputMask'
-import { Text, useTheme } from 'react-native-paper'
+import { HelperText, useTheme } from 'react-native-paper'
+import { dateToUnix, isDateWithinOptionalRange } from './dateUtils'
 
 function CalendarEdit({
   mode,
@@ -19,6 +20,7 @@ function CalendarEdit({
   endLabel = 'End',
   collapsed,
   onChange,
+  validRange,
 }: {
   mode: ModeType
   label?: string
@@ -27,6 +29,7 @@ function CalendarEdit({
   state: LocalState
   collapsed: boolean
   onChange: (s: LocalState) => any
+  validRange: ValidRangeType | undefined
 }) {
   const dateInput = React.useRef<TextInputNative | null>(null)
   const startInput = React.useRef<TextInputNative | null>(null)
@@ -80,6 +83,7 @@ function CalendarEdit({
             value={state.date}
             onChange={(date) => onChange({ ...state, date })}
             onSubmitEditing={onSubmitInput}
+            validRange={validRange}
           />
         ) : null}
         {mode === 'range' ? (
@@ -91,6 +95,7 @@ function CalendarEdit({
               onChange={(startDate) => onChange({ ...state, startDate })}
               returnKeyType={'next'}
               onSubmitEditing={onSubmitStartInput}
+              validRange={validRange}
             />
             <View style={styles.separator} />
             <CalendarInput
@@ -100,6 +105,7 @@ function CalendarEdit({
               onChange={(endDate) => onChange({ ...state, endDate })}
               isEndDate
               onSubmitEditing={onSubmitEndInput}
+              validRange={validRange}
             />
           </>
         ) : null}
@@ -117,6 +123,7 @@ function CalendarInputPure(
     returnKeyType,
     onSubmitEditing,
     locale,
+    validRange,
   }: {
     locale?: undefined | string
     label: string
@@ -125,11 +132,12 @@ function CalendarInputPure(
     isEndDate?: boolean
     returnKeyType?: string
     onSubmitEditing?: () => any
+    validRange: ValidRangeType | undefined
   },
   ref: any
 ) {
   const theme = useTheme()
-  const [error, setError] = React.useState(false)
+  const [error, setError] = React.useState<null | string>(null)
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
       month: '2-digit',
@@ -156,15 +164,40 @@ function CalendarInputPure(
     const day = Number(date.slice(dayIndex, dayIndex + 2))
     const year = Number(date.slice(yearIndex, yearIndex + 4))
     const month = Number(date.slice(monthIndex, monthIndex + 2))
-    if (!Number.isNaN(day) && !Number.isNaN(year) && !Number.isNaN(month)) {
-      setError(false)
-      if (isEndDate) {
-        onChange(new Date(year, month - 1, day, 23, 59, 59))
-      } else {
-        onChange(new Date(year, month - 1, day))
-      }
+
+    if (Number.isNaN(day) || Number.isNaN(year) || Number.isNaN(month)) {
+      setError(inputFormat)
+      return
+    }
+
+    const finalDate = isEndDate
+      ? new Date(year, month - 1, day, 23, 59, 59)
+      : new Date(year, month - 1, day)
+
+    const validStart = validRange?.startDate
+    const validEnd = validRange?.endDate
+    if (
+      !isDateWithinOptionalRange(finalDate, {
+        startUnix: validStart ? dateToUnix(validStart) : undefined,
+        endUnix: validEnd ? dateToUnix(validEnd) : undefined,
+      })
+    ) {
+      let errors =
+        validStart && validEnd
+          ? [`${formatter.format(validStart)} - ${formatter.format(validEnd)}`]
+          : [
+              validStart ? `> ${formatter.format(validStart)}` : '',
+              validEnd ? `< ${formatter.format(validEnd)}` : '',
+            ]
+      setError(errors.filter((n) => n).join(' '))
+      return
+    }
+
+    setError(null)
+    if (isEndDate) {
+      onChange(finalDate)
     } else {
-      setError(true)
+      onChange(finalDate)
     }
   }
   return (
@@ -181,20 +214,11 @@ function CalendarInputPure(
         returnKeyType={returnKeyType}
         onSubmitEditing={onSubmitEditing}
         keyboardAppearance={theme.dark ? 'dark' : 'default'}
+        error={!!error}
       />
-      {error && (
-        <Text
-          style={[
-            {
-              color: theme.colors.error,
-            },
-            theme.fonts.medium,
-            styles.errorText,
-          ]}
-        >
-          {inputFormat}
-        </Text>
-      )}
+      <HelperText type="error" visible={!!error}>
+        {error}
+      </HelperText>
     </View>
   )
 }
@@ -207,10 +231,6 @@ const styles = StyleSheet.create({
   inputContainer: { flex: 1 },
   input: { flex: 1 },
   separator: { width: 12 },
-  errorText: {
-    textAlign: 'right',
-    marginTop: 12,
-  },
 })
 
 export default React.memo(CalendarEdit)

src/Date/DatePickerModalContent.tsx

@@ -179,6 +179,7 @@ export function DatePickerModalContent(
             endLabel={props.endLabel}
             collapsed={collapsed}
             onChange={onInnerChange}
+            validRange={validRange}
           />
         }
       />