Merge pull request #5687 from qburst/issue-5644/enhancement/renderCustomHeader

✨ Add a support for `visibleYearsRange` in the `renderCustomHeader` of the YearPicker

Author: martijnrusschen

src/calendar.tsx

@@ -101,6 +101,10 @@ export interface ReactDatePickerCustomHeaderProps {
   nextMonthButtonDisabled: boolean;
   prevYearButtonDisabled: boolean;
   nextYearButtonDisabled: boolean;
+  visibleYearsRange?: {
+    startYear: number;
+    endYear: number;
+  };
 }
 
 type CalendarProps = React.PropsWithChildren<
@@ -860,6 +864,20 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
       return null;
     }
 
+    const { showYearPicker, yearItemNumber } = this.props;
+
+    let visibleYearsRange;
+    if (showYearPicker) {
+      const { startPeriod: startYear, endPeriod: endYear } = getYearsPeriod(
+        monthDate,
+        yearItemNumber,
+      );
+      visibleYearsRange = {
+        startYear,
+        endYear,
+      };
+    }
+
     const prevMonthButtonDisabled = monthDisabledBefore(
       this.state.date,
       this.props,
@@ -892,6 +910,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
       >
         {this.props.renderCustomHeader?.({
           ...this.state,
+          ...(showYearPicker && { visibleYearsRange }),
           customHeaderCount: i,
           monthDate,
           changeMonth: this.changeMonth,

src/test/calendar_test.test.tsx

@@ -550,6 +550,7 @@ describe("Calendar", () => {
     const renderCustomHeader = (params: ReactDatePickerCustomHeaderProps) => {
       const {
         date,
+        visibleYearsRange,
         changeYear,
         changeMonth,
         decreaseMonth,
@@ -560,6 +561,11 @@ describe("Calendar", () => {
 
       return (
         <div className="custom-header">
+          {visibleYearsRange && (
+            <h6 className="visible-years-range">
+              {visibleYearsRange.startYear} to {visibleYearsRange.endYear}
+            </h6>
+          )}
           <button
             className="prevMonth"
             onClick={decreaseMonth}
@@ -694,6 +700,31 @@ describe("Calendar", () => {
       ).toHaveLength(1);
     });
 
+    it("should render custom header with visible year range for YearPicker", () => {
+      const { calendar } = getCalendar({
+        renderCustomHeader,
+        showYearPicker: true,
+      });
+
+      expect(
+        calendar.querySelector(
+          ".react-datepicker__header--custom .visible-years-range",
+        ),
+      ).not.toBeNull();
+    });
+
+    it("should not render visible year range for non-YearPicker views", () => {
+      const { calendar } = getCalendar({
+        renderCustomHeader,
+      });
+
+      expect(
+        calendar.querySelector(
+          ".react-datepicker__header--custom .visible-years-range",
+        ),
+      ).toBeNull();
+    });
+
     it("should not render day names with renderCustomHeader & showMonthYearPicker", () => {
       const { calendar } = getCalendar({
         renderCustomHeader,