Added support for displaying (only) the year picker

src/components/Calendar/Years.tsx

@@ -1,17 +1,24 @@
-import React from "react";
+import React, { useContext } from "react";
 
 import { generateArrayNumber } from "../../helpers";
 import { RoundedButton } from "../utils";
 
+import DatepickerContext from "contexts/DatepickerContext";
+
 interface Props {
     year: number;
     clickYear: (data: number) => void;
 }
 
 const Years: React.FC<Props> = ({ year, clickYear }) => {
+    const { yearPickerStartYearOffset } = useContext(DatepickerContext);
+
     return (
         <div className="w-full grid grid-cols-2 gap-2 mt-2">
-            {generateArrayNumber(year, year + 11).map((item, index) => (
+            {generateArrayNumber(
+                year + (yearPickerStartYearOffset || 0),
+                year + (yearPickerStartYearOffset || 0) + 11
+            ).map((item, index) => (
                 <RoundedButton
                     key={index}
                     padding="py-3"

src/components/Calendar/index.tsx

@@ -33,14 +33,16 @@ interface Props {
     onClickNext: () => void;
     changeMonth: (month: number) => void;
     changeYear: (year: number) => void;
+    showYearPicker?: boolean;
 }
 
 const Calendar: React.FC<Props> = ({
     date,
     onClickPrevious,
     onClickNext,
     changeMonth,
-    changeYear
+    changeYear,
+    showYearPicker
 }) => {
     // Contexts
     const {
@@ -59,7 +61,7 @@ const Calendar: React.FC<Props> = ({
 
     // States
     const [showMonths, setShowMonths] = useState(false);
-    const [showYears, setShowYears] = useState(false);
+    const [showYears, setShowYears] = useState(showYearPicker);
     const [year, setYear] = useState(date.year());
     // Functions
     const previous = useCallback(() => {
@@ -88,29 +90,8 @@ const Calendar: React.FC<Props> = ({
         showYears && setShowYears(false);
     }, [showYears]);
 
-    const clickMonth = useCallback(
-        (month: number) => {
-            setTimeout(() => {
-                changeMonth(month);
-                setShowMonths(!showMonths);
-            }, 250);
-        },
-        [changeMonth, showMonths]
-    );
-
-    const clickYear = useCallback(
-        (year: number) => {
-            setTimeout(() => {
-                changeYear(year);
-                setShowYears(!showYears);
-            }, 250);
-        },
-        [changeYear, showYears]
-    );
-
-    const clickDay = useCallback(
-        (day: number, month = date.month() + 1, year = date.year()) => {
-            const fullDay = `${year}-${month}-${day}`;
+    const selectDateHelper = useCallback(
+        (fullDay: string) => {
             let newStart;
             let newEnd = null;
 
@@ -183,7 +164,6 @@ const Calendar: React.FC<Props> = ({
             changeDatepickerValue,
             changeDayHover,
             changePeriod,
-            date,
             hideDatepicker,
             period.end,
             period.start,
@@ -192,6 +172,39 @@ const Calendar: React.FC<Props> = ({
         ]
     );
 
+    const clickMonth = useCallback(
+        (month: number) => {
+            setTimeout(() => {
+                changeMonth(month);
+                setShowMonths(!showMonths);
+            }, 250);
+        },
+        [changeMonth, showMonths]
+    );
+
+    const clickYear = useCallback(
+        (year: number) => {
+            setTimeout(() => {
+                setShowYears(showYearPicker ? true : !showYears);
+                if (showYearPicker) {
+                    const fullDay = `${year}-${1}-${1}`;
+                    selectDateHelper(fullDay);
+                } else {
+                    changeYear(year);
+                }
+            }, 250);
+        },
+        [changeYear, selectDateHelper, showYearPicker, showYears]
+    );
+
+    const clickDay = useCallback(
+        (day: number, month = date.month() + 1, year = date.year()) => {
+            const fullDay = `${year}-${month}-${day}`;
+            selectDateHelper(fullDay);
+        },
+        [date, selectDateHelper]
+    );
+
     const clickPreviousDays = useCallback(
         (day: number) => {
             const newDate = previousMonth(date);

src/components/Datepicker.tsx

@@ -27,6 +27,7 @@ interface Props {
     useRange?: boolean;
     showFooter?: boolean;
     showShortcuts?: boolean;
+    showYearPicker?: boolean;
     configs?: {
         shortcuts?: {
             today?: string;
@@ -59,6 +60,7 @@ interface Props {
     maxDate?: DateType | null;
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
+    yearPickerStartYearOffset?: number;
 }
 
 const Datepicker: React.FC<Props> = ({
@@ -87,7 +89,9 @@ const Datepicker: React.FC<Props> = ({
     inputId,
     inputName,
     startWeekOn = "sun",
-    classNames = undefined
+    classNames = undefined,
+    showYearPicker = false,
+    yearPickerStartYearOffset = undefined
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement>(null);
@@ -314,7 +318,8 @@ const Datepicker: React.FC<Props> = ({
             startWeekOn,
             classNames,
             onChange,
-            input: inputRef
+            input: inputRef,
+            yearPickerStartYearOffset
         };
     }, [
         asSingle,
@@ -345,7 +350,8 @@ const Datepicker: React.FC<Props> = ({
         inputName,
         startWeekOn,
         classNames,
-        inputRef
+        inputRef,
+        yearPickerStartYearOffset
     ]);
 
     return (
@@ -377,6 +383,7 @@ const Datepicker: React.FC<Props> = ({
                                     onClickNext={nextMonthFirst}
                                     changeMonth={changeFirstMonth}
                                     changeYear={changeFirstYear}
+                                    showYearPicker={showYearPicker}
                                 />
 
                                 {useRange && (
@@ -391,6 +398,7 @@ const Datepicker: React.FC<Props> = ({
                                             onClickNext={nextMonthSecond}
                                             changeMonth={changeSecondMonth}
                                             changeYear={changeSecondYear}
+                                            showYearPicker={showYearPicker}
                                         />
                                     </>
                                 )}

src/contexts/DatepickerContext.ts

@@ -47,6 +47,7 @@ interface DatepickerStore {
     inputId?: string;
     inputName?: string;
     classNames?: ClassNamesTypeProp | undefined;
+    yearPickerStartYearOffset?: number;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({
@@ -91,7 +92,8 @@ const DatepickerContext = createContext<DatepickerStore>({
     inputName: undefined,
     startWeekOn: START_WEEK,
     toggleIcon: undefined,
-    classNames: undefined
+    classNames: undefined,
+    yearPickerStartYearOffset: undefined
 });
 
 export default DatepickerContext;