Merge pull request #165 from iM-GeeKy/feature/start-end-year

Introduce start and end year props.

Author: RichardLindhout

README.md

@@ -153,6 +153,8 @@ export default function ReadMeExampleSingle() {
         // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
         // closeIcon="close" // optional, default is "close"
         // editIcon="pencil" // optional, default is "pencil"
         // calendarIcon="calendar" // optional, default is "calendar"
@@ -214,6 +216,8 @@ export default function ReadMeExampleRange() {
         // startLabel="From" // optional
         // endLabel="To" // optional
         // animationType="slide" // optional, default is slide on ios/android and none on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
         // closeIcon="close" // optional, default is "close"
         // editIcon="pencil" // optional, default is "pencil"
         // calendarIcon="calendar" // optional, default is "calendar"
@@ -271,6 +275,8 @@ export default function ReadMeExampleMultiple() {
         // startLabel="From" // optional
         // endLabel="To" // optional
         // animationType="slide" // optional, default is slide on ios/android and none on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
         // closeIcon="close" // optional, default is "close"
       />
     </>

example/src/App.tsx

@@ -318,6 +318,8 @@ function App() {
         // startLabel="From" // optional
         // endLabel="To" // optional
         // animationType="slide" // optional, default is slide on ios/android and none on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
       />
 
       <DatePickerModal
@@ -337,6 +339,8 @@ function App() {
         // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
       />
 
       <DatePickerModal
@@ -355,6 +359,8 @@ function App() {
         // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
       />
 
       <TimePickerModal

example/src/ReadMeExampleMultiple.tsx

@@ -42,6 +42,8 @@ export default function ReadMeExampleMultiple() {
         // startLabel="From" // optional
         // endLabel="To" // optional
         // animationType="slide" // optional, default is slide on ios/android and none on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
       />
     </>
   )

example/src/ReadMeExampleRange.tsx

@@ -49,6 +49,8 @@ export default function ReadMeExampleRange() {
         // startLabel="From" // optional
         // endLabel="To" // optional
         // animationType="slide" // optional, default is slide on ios/android and none on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
       />
     </>
   )

example/src/ReadMeExampleSingle.tsx

@@ -40,6 +40,8 @@ export default function ReadMeExampleSingle() {
         // uppercase={false} // optional, default is true
         // label="Select date" // optional
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
+        // startYear={2000} // optional, default is 1800
+        // endYear={2100} // optional, default is 2200
       />
     </>
   )

src/Date/Calendar.tsx

@@ -31,6 +31,8 @@ export type BaseCalendarProps = {
   locale: string
   disableWeekDays?: DisableWeekDaysType
   validRange?: ValidRangeType
+  startYear?: number
+  endYear?: number
 
   // here they are optional but in final implemenation they are required
   date?: CalendarDate
@@ -88,6 +90,8 @@ function Calendar(
     endDate,
     date,
     disableWeekDays,
+    startYear,
+    endYear,
     dates,
     validRange,
     dateMode,
@@ -206,6 +210,8 @@ function Calendar(
           selectedYear={selectedYear}
           selectingYear={selectingYear}
           onPressYear={onPressYear}
+          startYear={startYear ?? 1800}
+          endYear={endYear ?? 2200}
         />
       ) : null}
     </View>

src/Date/DatePickerModalContent.tsx

@@ -81,6 +81,8 @@ export function DatePickerModalContent(
     locale,
     validRange,
     dateMode,
+    startYear,
+    endYear
   } = props
 
   const anyProps = props as any
@@ -178,6 +180,8 @@ export function DatePickerModalContent(
             dates={state.dates}
             validRange={validRange}
             dateMode={dateMode}
+            startYear={startYear}
+            endYear={endYear}
           />
         }
         calendarEdit={

src/Date/YearPicker.tsx

@@ -5,21 +5,22 @@ import { range } from '../utils'
 
 const ITEM_HEIGHT = 62
 
-const startYear = 1800
-const endYear = 2200
-const years = range(startYear, endYear)
-
 export default function YearPicker({
   selectedYear,
   selectingYear,
   onPressYear,
+  startYear,
+  endYear,
 }: {
   selectedYear: number | undefined
   selectingYear: boolean
   onPressYear: (year: number) => any
+  startYear: number
+  endYear: number
 }) {
   const theme = useTheme()
   const flatList = React.useRef<FlatList<number> | null>(null)
+  const years = range(isNaN(startYear) ? 1800 : startYear, isNaN(endYear) ? 2200 : endYear)
 
   // scroll to selected year
   React.useEffect(() => {