From 2b382bb60cc43eeb0c3ee137c37eb65b322cc4f9 Mon Sep 17 00:00:00 2001
From: Bart Verbruggen <bart@netnatie.com>
Date: Mon, 6 Jan 2020 09:01:08 +0100
Subject: [PATCH] Render custom header for month/quarter pickers. (#1990)

* Add year navigation props to custom header

* Fix calendar header on monthYearPicker and QuarterYear picker when custom header is set.

* Check for undefined on renderCustomHeader prop

* prepare for publish as fork

* prepare for publish as fork

* prepare for publish as fork

* prepare for publish as fork

* prepare for publish as fork

* prepare for publish as fork

* fix fork
---
 src/calendar.jsx | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/calendar.jsx b/src/calendar.jsx
index 10dc31af87..8b6272c706 100644
--- a/src/calendar.jsx
+++ b/src/calendar.jsx
@@ -580,6 +580,16 @@ export default class Calendar extends React.Component {
       this.props
     );
 
+    const prevYearButtonDisabled = yearDisabledBefore(
+      this.state.date,
+      this.props
+    );
+
+    const nextYearButtonDisabled = yearDisabledAfter(
+      this.state.date,
+      this.props
+    );
+
     return (
       <div
         className="react-datepicker__header react-datepicker__header--custom"
@@ -591,8 +601,12 @@ export default class Calendar extends React.Component {
           changeYear: this.changeYear,
           decreaseMonth: this.decreaseMonth,
           increaseMonth: this.increaseMonth,
+          decreaseYear: this.decreaseYear,
+          increaseYear: this.increaseYear,
           prevMonthButtonDisabled,
-          nextMonthButtonDisabled
+          nextMonthButtonDisabled,
+          prevYearButtonDisabled,
+          nextYearButtonDisabled
         })}
         <div className="react-datepicker__day-names">
           {this.header(monthDate)}
@@ -609,6 +623,17 @@ export default class Calendar extends React.Component {
     );
   };
 
+  renderHeader = headerArgs => {
+    switch (true) {
+      case this.props.renderCustomHeader !== undefined:
+        return this.renderCustomHeader(headerArgs);
+      case this.props.showMonthYearPicker || this.props.showQuarterYearPicker:
+        return this.renderYearHeader(headerArgs);
+      default:
+        return this.renderDefaultHeader(headerArgs);
+    }
+  };
+
   renderMonths = () => {
     if (this.props.showTimeSelectOnly) {
       return;
@@ -631,11 +656,7 @@ export default class Calendar extends React.Component {
           }}
           className="react-datepicker__month-container"
         >
-          {!this.props.showMonthYearPicker && !this.props.showQuarterYearPicker
-            ? this.props.renderCustomHeader
-              ? this.renderCustomHeader({ monthDate, i })
-              : this.renderDefaultHeader({ monthDate, i })
-            : this.renderYearHeader({ monthDate, i })}
+          {this.renderHeader({ monthDate, i })}
           <Month
             onChange={this.changeMonthYear}
             day={monthDate}