From 6cb420a1564cdad3aa7f5f593bbbdadde3c09fed Mon Sep 17 00:00:00 2001
From: Ryan Chou <ryan.chou@gogolook.com>
Date: Thu, 28 Nov 2024 11:38:55 +0800
Subject: [PATCH] fix: disabled left and right button when navigate to the edge
 month

---
 components/ui/datetime-picker.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/components/ui/datetime-picker.tsx b/components/ui/datetime-picker.tsx
index 62ffdb5..787c8a5 100644
--- a/components/ui/datetime-picker.tsx
+++ b/components/ui/datetime-picker.tsx
@@ -248,6 +248,28 @@ function Calendar({
   }, []);
 
   const YEARS = React.useMemo(() => genYears(yearRange), []);
+  const disableLeftNavigation = () => {
+    const today = new Date();
+    const startDate = new Date(today.getFullYear() - yearRange, 0, 1);
+    if (props.month) {
+      return (
+        props.month.getMonth() === startDate.getMonth() &&
+        props.month.getFullYear() === startDate.getFullYear()
+      );
+    }
+    return false;
+  };
+  const disableRightNavigation = () => {
+    const today = new Date();
+    const endDate = new Date(today.getFullYear() + yearRange, 11, 31);
+    if (props.month) {
+      return (
+        props.month.getMonth() === endDate.getMonth() &&
+        props.month.getFullYear() === endDate.getFullYear()
+      );
+    }
+    return false;
+  };
 
   return (
     <DayPicker
@@ -262,10 +284,12 @@ function Calendar({
         button_previous: cn(
           buttonVariants({ variant: 'outline' }),
           'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5',
+          disableLeftNavigation() && 'pointer-events-none',
         ),
         button_next: cn(
           buttonVariants({ variant: 'outline' }),
           'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5',
+          disableRightNavigation() && 'pointer-events-none',
         ),
         month_grid: 'w-full border-collapse space-y-1',
         weekdays: cn('flex', props.showWeekNumber && 'justify-end'),