Month dropdown does not respect minDate/maxDate

[armhaj]

Bug Description

When minDate/maxDate are set, the month dropdown in the calendar header lists and allows clicking months where all days are outside the allowed range. This is inconsistent with the navigation arrows, which correctly hide themselves when the adjacent month is fully out of range.

This inconsistency exposes a secondary bug: clicking a fully disabled month in the dropdown silently fails on the first click — the dropdown closes but the calendar remains on the current month. Only the second click navigates there.

This behavior only occurs on the first changeMonth() call after mount; subsequent calls work correctly.

To Reproduce

1. Render a DatePicker (see code below for exact props)
2. Open the month dropdown ("June ▾" in the header).
3. Observe that July, August, … December are listed and clickable, even though all of their days are beyond maxDate.
4. Click July.
   • The dropdown closes.
   • The calendar remains on June.
5. Click July again.
   • The calendar now navigates to July.

Reproduction

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { endOfDay, startOfDay } from "date-fns";
import { useState } from "react";

const minDate = startOfDay(new Date(2025, 0, 1)); // Jan 1, 2025
const maxDate = endOfDay(new Date(2025, 5, 30)); // Jun 30, 2025

export const App = () => {
  const [range, setRange] = useState([
    new Date(2025, 5, 1),
    new Date(2025, 5, 15),
  ]);

  return (
    <DatePicker
      selected={range[0]}
      startDate={range[0]}
      endDate={range[1]}
      onChange={setRange}
      minDate={minDate}
      maxDate={maxDate}
      showMonthDropdown
      dropdownMode="scroll"
      selectsRange
      inline
    />
  );
}

Expected Behavior

The month dropdown should be consistent with the navigation arrows:

• Months where all days fall outside minDate/maxDate should be hidden or disabled in the dropdown.
• The same boundary logic used by the navigation arrows (Next button is hidden for future months with no selectable date) should apply to month selection.
• If a fully disabled month is reachable via the dropdown, selecting it should navigate there on the first click.

Screenshots

Screen.Recording.2026-06-02.at.15.53.00.mov

Environment

• OS: macOS
• Browser: Chrome
• react-datepicker version: ^9.1.0
• React version: ^18