fix: Prev/next buttons when using showMonthYearPicker (#1950)

* fix: Prev/next buttons when using showMonthYearPicker

Check prev/next year instead of month when showMonthYearPicker is set.

* test: Add tests for yearDisabledBefore/After

And fix discovered issue.

Author: jnystad

src/calendar.jsx

@@ -30,6 +30,8 @@ import {
   isSameDay,
   monthDisabledBefore,
   monthDisabledAfter,
+  yearDisabledBefore,
+  yearDisabledAfter,
   getEffectiveMinDate,
   getEffectiveMaxDate,
   addZero
@@ -349,10 +351,9 @@ export default class Calendar extends React.Component {
       return;
     }
 
-    const allPrevDaysDisabled = monthDisabledBefore(
-      this.state.date,
-      this.props
-    );
+    const allPrevDaysDisabled = this.props.showMonthYearPicker
+      ? yearDisabledBefore(this.state.date, this.props)
+      : monthDisabledBefore(this.state.date, this.props);
 
     if (
       (!this.props.forceShowMonthNavigation &&
@@ -406,7 +407,9 @@ export default class Calendar extends React.Component {
       return;
     }
 
-    const allNextDaysDisabled = monthDisabledAfter(this.state.date, this.props);
+    const allNextDaysDisabled = this.props.showMonthYearPicker
+      ? yearDisabledAfter(this.state.date, this.props)
+      : monthDisabledAfter(this.state.date, this.props);
 
     if (
       (!this.props.forceShowMonthNavigation &&

src/date_utils.js

@@ -33,6 +33,7 @@ import max from "date-fns/max";
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import differenceInCalendarMonths from "date-fns/differenceInCalendarMonths";
 import differenceInCalendarWeeks from "date-fns/differenceInCalendarWeeks";
+import differenceInCalendarYears from "date-fns/differenceInCalendarYears";
 import startOfDay from "date-fns/startOfDay";
 import startOfWeek from "date-fns/startOfWeek";
 import startOfMonth from "date-fns/startOfMonth";
@@ -525,6 +526,30 @@ export function monthDisabledAfter(day, { maxDate, includeDates } = {}) {
   );
 }
 
+export function yearDisabledBefore(day, { minDate, includeDates } = {}) {
+  const previousYear = subYears(day, 1);
+  return (
+    (minDate && differenceInCalendarYears(minDate, previousYear) > 0) ||
+    (includeDates &&
+      includeDates.every(
+        includeDate => differenceInCalendarYears(includeDate, previousYear) > 0
+      )) ||
+    false
+  );
+}
+
+export function yearDisabledAfter(day, { maxDate, includeDates } = {}) {
+  const nextYear = addYears(day, 1);
+  return (
+    (maxDate && differenceInCalendarYears(nextYear, maxDate) > 0) ||
+    (includeDates &&
+      includeDates.every(
+        includeDate => differenceInCalendarYears(nextYear, includeDate) > 0
+      )) ||
+    false
+  );
+}
+
 export function getEffectiveMinDate({ minDate, includeDates }) {
   if (includeDates && minDate) {
     let minDates = includeDates.filter(

test/date_utils_test.js

@@ -13,6 +13,8 @@ import {
   isQuarterDisabled,
   monthDisabledBefore,
   monthDisabledAfter,
+  yearDisabledBefore,
+  yearDisabledAfter,
   getEffectiveMinDate,
   getEffectiveMaxDate,
   addZero,
@@ -426,6 +428,54 @@ describe("date_utils", function() {
     });
   });
 
+  describe("yearDisabledBefore", () => {
+    it("should return false by default", () => {
+      expect(yearDisabledBefore(newDate())).to.be.false;
+    });
+
+    it("should return true if min date is in the same year", () => {
+      const day = newDate("2016-02-19");
+      const minDate = newDate("2016-03-01");
+      expect(yearDisabledBefore(day, { minDate })).to.be.true;
+    });
+
+    it("should return false if min date is in the previous year", () => {
+      const day = newDate("2016-03-19");
+      const minDate = newDate("2015-03-29");
+      expect(yearDisabledBefore(day, { minDate })).to.be.false;
+    });
+
+    it("should return true if previous year is before include dates", () => {
+      const day = newDate("2016-03-19");
+      const includeDates = [newDate("2016-03-01")];
+      expect(yearDisabledBefore(day, { includeDates })).to.be.true;
+    });
+  });
+
+  describe("yearDisabledAfter", () => {
+    it("should return false by default", () => {
+      expect(yearDisabledAfter(newDate())).to.be.false;
+    });
+
+    it("should return true if max date is in the same year", () => {
+      const day = newDate("2016-03-19");
+      const maxDate = newDate("2016-08-31");
+      expect(yearDisabledAfter(day, { maxDate })).to.be.true;
+    });
+
+    it("should return false if max date is in the next year", () => {
+      const day = newDate("2016-03-19");
+      const maxDate = newDate("2017-04-01");
+      expect(yearDisabledAfter(day, { maxDate })).to.be.false;
+    });
+
+    it("should return true if next year is after include dates", () => {
+      const day = newDate("2016-03-19");
+      const includeDates = [newDate("2016-03-01")];
+      expect(yearDisabledAfter(day, { includeDates })).to.be.true;
+    });
+  });
+
   describe("getEffectiveMinDate", () => {
     it("should return null by default", () => {
       expect(getEffectiveMinDate({})).to.not.exist;