🐛 Handle the visibility of the previous and the next year navigation …

…button for the showQuarterYearPicker flag

Closes Hacker0x01#4644

src/calendar.jsx

@@ -36,6 +36,8 @@ import {
  yearDisabledAfter,
  yearsDisabledAfter,
  yearsDisabledBefore,
+ quarterDisabledBefore,
+ quarterDisabledAfter,
  getEffectiveMinDate,
  getEffectiveMaxDate,
  addZero,
@@ -489,6 +491,12 @@ export default class Calendar extends React.Component {
  case this.props.showYearPicker:
  allPrevDaysDisabled = yearsDisabledBefore(this.state.date, this.props);
  break;
+ case this.props.showQuarterYearPicker:
+ allPrevDaysDisabled = quarterDisabledBefore(
+ this.state.date,
+ this.props,
+ );
+ break;
  default:
  allPrevDaysDisabled = monthDisabledBefore(this.state.date, this.props);
  break;
@@ -586,6 +594,9 @@ export default class Calendar extends React.Component {
  case this.props.showYearPicker:
  allNextDaysDisabled = yearsDisabledAfter(this.state.date, this.props);
  break;
+ case this.props.showQuarterYearPicker:
+ allNextDaysDisabled = quarterDisabledAfter(this.state.date, this.props);
+ break;
  default:
  allNextDaysDisabled = monthDisabledAfter(this.state.date, this.props);
  break;

src/date_utils.js

@@ -34,6 +34,7 @@ import { max } from "date-fns/max";
 import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 import { differenceInCalendarMonths } from "date-fns/differenceInCalendarMonths";
 import { differenceInCalendarYears } from "date-fns/differenceInCalendarYears";
+import { differenceInCalendarQuarters } from "date-fns/differenceInCalendarQuarters";
 import { startOfDay } from "date-fns/startOfDay";
 import { startOfWeek } from "date-fns/startOfWeek";
 import { startOfMonth } from "date-fns/startOfMonth";
@@ -654,6 +655,36 @@ export function monthDisabledAfter(day, { maxDate, includeDates } = {}) {
  );
 }
 
+export function quarterDisabledBefore(day, { minDate, includeDates } = {}) {
+ const firstDayOfYear = startOfYear(day);
+ const previousQuarter = subQuarters(firstDayOfYear, 1);
+
+ return (
+ (minDate && differenceInCalendarQuarters(minDate, previousQuarter) > 0) ||
+ (includeDates &&
+ includeDates.every(
+ (includeDate) =>
+ differenceInCalendarQuarters(includeDate, previousQuarter) > 0,
+ )) ||
+ false
+ );
+}
+
+export function quarterDisabledAfter(day, { maxDate, includeDates } = {}) {
+ const lastDayOfYear = endOfYear(day);
+ const nextQuarter = addQuarters(lastDayOfYear, 1);
+
+ return (
+ (maxDate && differenceInCalendarQuarters(nextQuarter, maxDate) > 0) ||
+ (includeDates &&
+ includeDates.every(
+ (includeDate) =>
+ differenceInCalendarQuarters(nextQuarter, includeDate) > 0,
+ )) ||
+ false
+ );
+}
+
 export function yearDisabledBefore(day, { minDate, includeDates } = {}) {
  const previousYear = subYears(day, 1);
  return (

test/calendar_test.test.js

@@ -9,7 +9,7 @@ import DatePicker from "../src/index.jsx";
 import * as utils from "../src/date_utils";
 import { eo } from "date-fns/locale/eo";
 import { fi } from "date-fns/locale/fi";
-import { isSunday } from "date-fns";
+import { endOfYear, isSunday, startOfMonth } from "date-fns";
 import { getKey } from "./test_utils";
 
 // TODO Possibly rename
@@ -1822,6 +1822,27 @@ describe("Calendar", () => {
  });
  expect(utils.getYear(instance.state.date)).toBe(1994);
  });
+
+ it("should hide the previous year navigation arrow button when the minDate falls under the currently visible year ", () => {
+ const { container } = render(
+ <Calendar showQuarterYearPicker minDate={startOfMonth(new Date())} />,
+ );
+ const previous = container.querySelector(
+ ".react-datepicker__navigation--previous",
+ );
+ expect(previous).toBeNull();
+ });
+
+ it("should hide the next year navigation arrow button when the maxDate falls under the currently visible year ", () => {
+ const { container } = render(
+ <Calendar showQuarterYearPicker maxDate={endOfYear(new Date())} />,
+ );
+
+ const next = container.querySelector(
+ ".react-datepicker__navigation--next",
+ );
+ expect(next).toBeNull();
+ });
  });
 
  describe("using click outside", () => {