Fixes issues when using renderCustomHeader with alt pickers (#2135)

* allow renderCustomHeader with showYearList

* Stop rendering day names when no showing days

Stops rendering day names when using a custom header and showing
either the month picker, quarter picker or year picker.

Co-authored-by: Adam Mercy <adamjmercy@gmail.com>

src/calendar.jsx

@@ -622,8 +622,10 @@ export default class Calendar extends React.Component {
     </div>
   );
 
-  renderCustomHeader = ({ monthDate, i }) => {
-    if (i !== 0) {
+  renderCustomHeader = (headerArgs = {}) => {
+    const { monthDate, i } = headerArgs;
+
+    if (i !== 0 && i !== undefined) {
       return null;
     }
 
@@ -647,6 +649,11 @@ export default class Calendar extends React.Component {
       this.props
     );
 
+    const showDayNames =
+      !this.props.showMonthYearPicker &&
+      !this.props.showQuarterYearPicker &&
+      !this.props.showYearPicker;
+
     return (
       <div
         className="react-datepicker__header react-datepicker__header--custom"
@@ -665,9 +672,11 @@ export default class Calendar extends React.Component {
           prevYearButtonDisabled,
           nextYearButtonDisabled
         })}
-        <div className="react-datepicker__day-names">
-          {this.header(monthDate)}
-        </div>
+        {showDayNames && (
+          <div className="react-datepicker__day-names">
+            {this.header(monthDate)}
+          </div>
+        )}
       </div>
     );
   };

test/calendar_test.js

@@ -318,6 +318,70 @@ describe("Calendar", function() {
       expect(nextMonth).to.have.length(1);
     });
 
+    it("should render custom header when showing year picker", function() {
+      const calendar = getCalendar({
+        renderCustomHeader,
+        showYearPicker: true
+      });
+
+      expect(calendar.find(".react-datepicker__header--custom")).to.have.length(
+        1
+      );
+
+      expect(calendar.find(".react-datepicker__year")).to.have.length(1);
+    });
+
+    it("should render day names with renderCustomHeader", function() {
+      const calendar = getCalendar({
+        renderCustomHeader
+      });
+
+      expect(calendar.find(".react-datepicker__header--custom")).to.have.length(
+        1
+      );
+
+      expect(calendar.find(".react-datepicker__day-names")).to.have.length(1);
+    });
+
+    it("should not render day names with renderCustomHeader & showMonthYearPicker", function() {
+      const calendar = getCalendar({
+        renderCustomHeader,
+        showMonthYearPicker: true
+      });
+
+      expect(calendar.find(".react-datepicker__header--custom")).to.have.length(
+        1
+      );
+
+      expect(calendar.find(".react-datepicker__day-names")).to.have.length(0);
+    });
+
+    it("should not render day names with renderCustomHeader & showYearPicker", function() {
+      const calendar = getCalendar({
+        renderCustomHeader,
+        showYearPicker: true
+      });
+
+      expect(calendar.find(".react-datepicker__header--custom")).to.have.length(
+        1
+      );
+
+      expect(calendar.find(".react-datepicker__day-names")).to.have.length(0);
+    });
+
+    it("should not render day names with renderCustomHeader & showQuarterYearPicker", function() {
+      const calendar = getCalendar({
+        renderCustomHeader,
+        showQuarterYearPicker: true
+      });
+
+      expect(calendar.find(".react-datepicker__header--custom")).to.have.length(
+        1
+      );
+
+      expect(calendar.find(".react-datepicker__day-names")).to.have.length(0);
+    });
+
     it("should go to previous month", function() {
       const calendar = getCalendar({
         renderCustomHeader