Fix #1661: Calendar do not navigate past min/max dates (#2556)

primefaces · Apr 15, 2022 · e86f1de · e86f1de
1 parent c960249
commit e86f1de
Showing 1 changed file with 62 additions and 0 deletions.
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -252,6 +252,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
     const navBackward = (event) => {
         if (props.disabled) {
             event.preventDefault();
+            event.stopPropagation();
             return;
         }
 
@@ -266,6 +267,18 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
             else {
                 newViewDate.setMonth(newViewDate.getMonth() - 1);
             }
+
+            // check if month can be navigated to by checking last day in month
+            let testDate = new Date(newViewDate.getTime()),
+                minDate = this.props.minDate;
+            testDate.setMonth(testDate.getMonth() + 1);
+            testDate.setHours(-1);
+            if (minDate && minDate > testDate) {
+                this.setNavigationState(newViewDate);
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
         }
         else if (props.view === 'month') {
             let currentYear = newViewDate.getFullYear();
@@ -285,11 +298,13 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
         updateViewDate(event, newViewDate);
 
         event.preventDefault();
+        event.stopPropagation();
     }
 
     const navForward = (event) => {
         if (props.disabled) {
             event.preventDefault();
+            event.stopPropagation();
             return;
         }
 
@@ -304,6 +319,15 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
             else {
                 newViewDate.setMonth(newViewDate.getMonth() + 1);
             }
+
+            // check if month can be navigated to by checking first day next month
+            let maxDate = this.props.maxDate;
+            if (maxDate && maxDate < newViewDate) {
+                this.setNavigationState(newViewDate);
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
         }
         else if (props.view === 'month') {
             let currentYear = newViewDate.getFullYear();
@@ -323,6 +347,41 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
         updateViewDate(event, newViewDate);
 
         event.preventDefault();
+        event.stopPropagation();
+    }
+
+    setNavigationState(newViewDate) {
+        if (this.props.view !== 'date' || !this.overlayRef) {
+            return;
+        }
+
+        let navPrev = DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-prev');
+        let navNext = DomHandler.findSingle(this.overlayRef.current, '.p-datepicker-next');
+
+        if (this.props.disabled) {
+            DomHandler.addClass(navPrev, 'p-disabled');
+            DomHandler.addClass(navNext, 'p-disabled');
+            return;
+        }
+
+        // previous
+        let testDate = new Date(newViewDate.getTime()),
+            minDate = this.props.minDate;
+        testDate.setMonth(testDate.getMonth()+1);
+        testDate.setHours(-1);
+        if (minDate && minDate > testDate) {
+            DomHandler.addClass(navPrev, 'p-disabled');
+        } else {
+            DomHandler.removeClass(navPrev, 'p-disabled');
+        }
+
+        // next
+        let maxDate = this.props.maxDate;
+        if (maxDate && maxDate < newViewDate) {
+            DomHandler.addClass(navNext, 'p-disabled');
+        } else {
+            DomHandler.removeClass(navNext, 'p-disabled');
+        }
     }
 
     const onMonthDropdownChange = (event, value) => {
@@ -829,6 +888,9 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
 
             value.setMonth(viewMonthWithMinMax);
         }
+
+        // set state of navigator buttons
+        this.setNavigationState(value);
     }
 
     const updateTime = (event, hour, minute, second, millisecond) => {