Merge pull request #5618 from johannrp27/patch-1

fix: correct usage of customHeaderCount to keep arrows on any monthsShown prop

Author: martijnrusschen

docs-site/src/components/Example/index.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef, useMemo, useState } from "react";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import DatePicker, {
   registerLocale,
@@ -35,6 +35,7 @@ export default class CodeExampleComponent extends React.Component {
             scope={{
               // NB any globals added here should also be referenced in ../../examples/.eslintrc
               useState,
+              useMemo,
               DatePicker,
               CalendarContainer,
               ...DateFNS,

docs-site/src/examples/renderCustomHeaderTwoMonths.js

@@ -1,5 +1,8 @@
+import { useState, useMemo } from "react";
+
 () => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [startDate, setStartDate] = useState(new Date());
+  const monthsShown = useMemo(() => 2, []);
   return (
     <DatePicker
       renderCustomHeader={({
@@ -14,8 +17,10 @@
             className={
               "react-datepicker__navigation react-datepicker__navigation--previous"
             }
-            style={customHeaderCount === 1 ? { visibility: "hidden" } : null}
             onClick={decreaseMonth}
+            style={{
+              visibility: customHeaderCount === 0 ? "visible" : "hidden",
+            }}
           >
             <span
               className={
@@ -36,8 +41,11 @@
             className={
               "react-datepicker__navigation react-datepicker__navigation--next"
             }
-            style={customHeaderCount === 0 ? { visibility: "hidden" } : null}
             onClick={increaseMonth}
+            style={{
+              visibility:
+                customHeaderCount === monthsShown - 1 ? "visible" : "hidden",
+            }}
           >
             <span
               className={
@@ -49,9 +57,9 @@
           </button>
         </div>
       )}
-      selected={selectedDate}
-      onChange={(date) => setSelectedDate(date)}
-      monthsShown={2}
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      monthsShown={monthsShown}
     />
   );
 };