Added support for selecting a range of years (from-to) when using onl…

…y the year picker
onesine · Mar 13, 2023 · 166c496 · 166c496
1 parent 2739ae9
commit 166c496
Showing 1 changed file with 35 additions and 35 deletions.
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
@@ -90,40 +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(showYearPicker ? true : !showYears);
-                if (showYearPicker && asSingle) {
-                    const ipt = input?.current;
-                    changeDatepickerValue(
-                        {
-                            startDate: String(year) + "-1-1",
-                            endDate: String(year) + "-1-1"
-                        },
-                        ipt
-                    );
-                    hideDatepicker();
-                }
-            }, 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;
 
@@ -196,7 +164,6 @@ const Calendar: React.FC<Props> = ({
             changeDatepickerValue,
             changeDayHover,
             changePeriod,
-            date,
             hideDatepicker,
             period.end,
             period.start,
@@ -205,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);