Disabling years outside maxDate and minDate range

Author: devinmatte

src/components/Calendar/Years.tsx

@@ -5,10 +5,12 @@ import { RoundedButton } from "../utils";
 
 interface Props {
     year: number;
+    minYear: number | null;
+    maxYear: number | null;
     clickYear: (data: number) => void;
 }
 
-const Years: React.FC<Props> = ({ year, clickYear }) => {
+const Years: React.FC<Props> = ({ year, minYear, maxYear, clickYear }) => {
     return (
         <div className="w-full grid grid-cols-2 gap-2 mt-2">
             {generateArrayNumber(year, year + 11).map((item, index) => (
@@ -18,6 +20,9 @@ const Years: React.FC<Props> = ({ year, clickYear }) => {
                     onClick={() => {
                         clickYear(item);
                     }}
+                    disabled={
+                        (maxYear !== null && item > maxYear) || (minYear !== null && item < minYear)
+                    }
                 >
                     <>{item}</>
                 </RoundedButton>

src/components/Calendar/index.tsx

@@ -26,8 +26,12 @@ import Months from "./Months";
 import Week from "./Week";
 import Years from "./Years";
 
+import { DateType } from "types";
+
 interface Props {
     date: dayjs.Dayjs;
+    minDate?: DateType | null;
+    maxDate?: DateType | null;
     onClickPrevious: () => void;
     onClickNext: () => void;
     changeMonth: (month: number) => void;
@@ -36,6 +40,8 @@ interface Props {
 
 const Calendar: React.FC<Props> = ({
     date,
+    minDate,
+    maxDate,
     onClickPrevious,
     onClickNext,
     changeMonth,
@@ -229,6 +235,14 @@ const Calendar: React.FC<Props> = ({
             }
         };
     }, [current, date, next, previous]);
+    const minYear = React.useMemo(
+        () => (minDate && dayjs(minDate).isValid() ? dayjs(minDate).year() : null),
+        [minDate]
+    );
+    const maxYear = React.useMemo(
+        () => (maxDate && dayjs(maxDate).isValid() ? dayjs(maxDate).year() : null),
+        [maxDate]
+    );
 
     return (
         <div className="w-full md:w-[297px] md:min-w-[297px]">
@@ -303,7 +317,9 @@ const Calendar: React.FC<Props> = ({
             <div className="px-0.5 sm:px-2 mt-0.5 min-h-[285px]">
                 {showMonths && <Months clickMonth={clickMonth} />}
 
-                {showYears && <Years year={year} clickYear={clickYear} />}
+                {showYears && (
+                    <Years year={year} minYear={minYear} maxYear={maxYear} clickYear={clickYear} />
+                )}
 
                 {!showMonths && !showYears && (
                     <>

src/components/Datepicker.tsx

@@ -367,6 +367,8 @@ const Datepicker: React.FC<Props> = ({
                                     onClickNext={nextMonthFirst}
                                     changeMonth={changeFirstMonth}
                                     changeYear={changeFirstYear}
+                                    minDate={minDate}
+                                    maxDate={maxDate}
                                 />
 
                                 {useRange && (
@@ -381,6 +383,8 @@ const Datepicker: React.FC<Props> = ({
                                             onClickNext={nextMonthSecond}
                                             changeMonth={changeSecondMonth}
                                             changeYear={changeSecondYear}
+                                            minDate={minDate}
+                                            maxDate={maxDate}
                                         />
                                     </>
                                 )}

src/components/utils.tsx

@@ -169,6 +169,7 @@ export const PrimaryButton: React.FC<Button> = ({ children, onClick, disabled =
 export const RoundedButton: React.FC<Button> = ({
     children,
     onClick,
+    disabled,
     roundedFull = false,
     padding = "py-[0.55rem]"
 }) => {
@@ -183,11 +184,13 @@ export const RoundedButton: React.FC<Button> = ({
             : `${darkClass} transition-all duration-300 hover:bg-gray-100 rounded-full p-[0.45rem] focus:ring-1`;
         const buttonFocusColor =
             BUTTON_COLOR.focus[primaryColor as keyof typeof BUTTON_COLOR.focus];
-        return `${defaultClass} ${buttonFocusColor}`;
-    }, [padding, primaryColor, roundedFull]);
+        const disabledClass = disabled ? "line-through" : "";
+
+        return `${defaultClass} ${buttonFocusColor} ${disabledClass}`;
+    }, [disabled, padding, primaryColor, roundedFull]);
 
     return (
-        <button type="button" className={getClassName()} onClick={onClick}>
+        <button type="button" className={getClassName()} onClick={onClick} disabled={disabled}>
             {children}
         </button>
     );