feat: valid range support

Author: nandorojo

src/Date/Calendar.tsx

@@ -9,6 +9,7 @@ import {
   dateToUnix,
   DisableWeekDaysType,
   getInitialIndex,
+  isDateWithinOptionalRange,
 } from './dateUtils'
 
 import CalendarHeader from './CalendarHeader'
@@ -22,9 +23,15 @@ export type ModeType = 'single' | 'range' | 'excludeInRange' | 'multiple'
 
 export type ScrollModeType = 'horizontal' | 'vertical'
 
+export type ValidRangeType = {
+  startDate?: Date
+  endDate?: Date
+}
+
 export type BaseCalendarProps = {
   locale?: undefined | string
   disableWeekDays?: DisableWeekDaysType
+  validRange?: ValidRangeType
 }
 
 export type CalendarDate = Date | undefined
@@ -95,6 +102,7 @@ function Calendar(
     disableWeekDays,
     // @ts-ignore
     dates,
+    validRange,
   } = props
 
   const theme = useTheme()
@@ -131,8 +139,27 @@ function Calendar(
   >(onChange)
   const datesRef = useLatest<Date[]>(dates)
 
+  // Dates => primitives (memoized & trigger re-renders as needed)
+  const validRangeStart =
+    validRange?.startDate instanceof Date
+      ? validRange?.startDate?.toISOString()
+      : null
+  const validRangeEnd =
+    validRange?.endDate instanceof Date
+      ? validRange?.endDate?.toISOString()
+      : null
+
   const onPressDate = useCallback(
     (d: Date) => {
+      const isWithinValidRange = isDateWithinOptionalRange(d, {
+        startDate: validRangeStart ? new Date(validRangeStart) : undefined,
+        endDate: validRangeEnd ? new Date(validRangeEnd) : undefined,
+      })
+
+      if (!isWithinValidRange) {
+        return
+      }
+
       if (mode === 'single') {
         ;(onChangeRef.current as SingleChange)({
           date: d,
@@ -180,7 +207,16 @@ function Calendar(
         })
       }
     },
-    [mode, onChangeRef, startDateRef, endDateRef, excludedDatesRef, datesRef]
+    [
+      validRangeStart,
+      validRangeEnd,
+      mode,
+      onChangeRef,
+      startDateRef,
+      endDateRef,
+      excludedDatesRef,
+      datesRef,
+    ]
   )
 
   return (
@@ -194,6 +230,7 @@ function Calendar(
             locale={locale}
             mode={mode}
             key={index}
+            validRange={validRange}
             index={index}
             startDate={startDate}
             endDate={endDate}

src/Date/DatePickerModalContent.tsx

@@ -91,6 +91,7 @@ export function DatePickerModalContent(
     disableSafeTop,
     disableWeekDays,
     locale,
+    validRange,
   } = props
 
   const anyProps = props as any
@@ -193,6 +194,7 @@ export function DatePickerModalContent(
             onChange={onInnerChange}
             disableWeekDays={disableWeekDays}
             dates={state.dates}
+            validRange={validRange}
           />
         }
         calendarEdit={

src/Date/Month.tsx

@@ -18,9 +18,10 @@ import {
   startAtIndex,
   beginOffset,
   estimatedMonthHeight,
+  isDateWithinOptionalRange,
 } from './dateUtils'
 import { getCalendarHeaderHeight } from './CalendarHeader'
-import { ModeType } from './Calendar'
+import type { ModeType, ValidRangeType } from './Calendar'
 import { dayNamesHeight } from './DayNames'
 import { useTextColorOnPrimary } from '../utils'
 
@@ -40,6 +41,7 @@ interface BaseMonthProps {
   primaryColor: string
   selectColor: string
   roundness: number
+  validRange?: ValidRangeType
 }
 
 interface MonthRangeProps extends BaseMonthProps {
@@ -82,6 +84,7 @@ function Month({
   locale,
   // @ts-ignore
   dates,
+  validRange,
 }:
   | MonthSingleProps
   | MonthRangeProps
@@ -92,6 +95,16 @@ function Month({
   const realIndex = getRealIndex(index)
   const isHorizontal = scrollMode === 'horizontal'
 
+  const validRangeStart =
+    validRange?.startDate instanceof Date
+      ? validRange?.startDate?.toISOString()
+      : null
+
+  const validRangeEnd =
+    validRange?.endDate instanceof Date
+      ? validRange?.endDate?.toISOString()
+      : null
+
   const { monthName, month, year } = React.useMemo(() => {
     const md = addMonths(new Date(), realIndex)
     const y = md.getFullYear()
@@ -125,6 +138,11 @@ function Month({
           const selectedEndDay = areDatesOnSameDay(day, endDate)
           const selectedDay = areDatesOnSameDay(day, date)
 
+          const isWithinOptionalValidRange = isDateWithinOptionalRange(day, {
+            startDate: validRangeStart ? new Date(validRangeStart) : undefined,
+            endDate: validRangeEnd ? new Date(validRangeEnd) : undefined,
+          })
+
           const multiDates = dates as Date[] | undefined
 
           const selectedMultiDay = !!multiDates?.some((d) =>
@@ -151,6 +169,10 @@ function Month({
             disabled = false
           }
 
+          if (!isWithinOptionalValidRange) {
+            disabled = true
+          }
+
           let leftCrop: boolean = selectedStartDay || dayOfMonth === 1
           let rightCrop: boolean = selectedEndDay || dayOfMonth === daysInMonth
 
@@ -208,7 +230,19 @@ function Month({
         }),
       }
     })
-  }, [year, month, index, startDate, endDate, date, dates, mode, excludedDates])
+  }, [
+    year,
+    month,
+    index,
+    startDate,
+    endDate,
+    date,
+    validRangeStart,
+    validRangeEnd,
+    dates,
+    mode,
+    excludedDates,
+  ])
 
   return (
     <View style={[styles.month, { height: getMonthHeight(scrollMode, index) }]}>