🐛 Fix: Respect minDate/maxDate in Month Dropdown (showMonthDropdown)

[balajis-qb]

Description

Linked issue: #6286

Problem

showMonthDropdown ignored minDate, maxDate, excludeDates, includeDates, and filterDate, allowing navigation to any month of the year even when the date range restricted it. For example, with minDate=2025-01-01 and maxDate=2025-06-30, users could still pick July–December 2025 via the month dropdown.

showMonthYearDropdown already handled this correctly, because MonthYearDropdown builds its option list directly from the minDate–maxDate range. MonthDropdown is a separate, independent component that always rendered all 12 months and called onChange unconditionally — it never consulted minDate/maxDate at all.

Fix

Reused the existing isMonthDisabled helper (already used by the full month-grid picker in month.tsx for the identical constraint) to disable out-of-range months in both dropdown modes:

• month_dropdown_options.tsx (scroll mode) — each month option is checked against minDate/maxDate/excludeDates/includeDates/filterDate. Disabled options get an --disabled class + aria-disabled, and clicks/Enter on them are ignored.
• month_dropdown.tsx (select mode) — the corresponding <option> elements get the native disabled attribute; onChange also guards against disabled months.
• calendar.tsx — passes the currently viewed date into MonthDropdown so it has year context (needed because MonthDropdown only tracks a bare month index 0–11, not a year).
• datepicker.scss — added a muted/cursor: default style for .react-datepicker__month-option--disabled, matching the existing disabled-day styling.

Why gray out instead of filter out?

YearDropdown and MonthYearDropdown filter their option lists because each option is a self-contained unit (a year, or a year+month pair) — whether it's in range depends only on minDate/maxDate.

MonthDropdown is different: its 12 options ("January"–"December") only make sense relative to whichever year is currently displayed, and that year is controlled externally (the sibling YearDropdown, or prev/next navigation) — MonthDropdown has no say in it. If we filtered instead of disabled, the list's length and item positions would change every time the user changed the year. For example, with minDate=Jun 2024 and maxDate=Mar 2026: viewing 2024 would show 6 months, viewing 2025 would show all 12, and viewing 2026 would show 3 — a jarring, unstable list for what's meant to be a fixed 12-month picker.

This is exactly the same constraint the full month-grid picker (month.tsx, used by showFullMonthYearPicker) already faces, and it solves it by disabling rather than filtering (isMonthDisabled / month-text--disabled). Graying out keeps the option list stable and consistent with that existing precedent, and is also more accessible — aria-disabled tells assistive tech the option exists but isn't currently selectable, rather than having it silently disappear.

Contribution checklist

• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.32%. Comparing base (548a1f3) to head (e1ff9e1).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6306      +/-   ##
==========================================
+ Coverage   99.29%   99.32%   +0.02%     
==========================================
  Files          30       30              
  Lines        3822     3831       +9     
  Branches     1648     1669      +21     
==========================================
+ Hits         3795     3805      +10     
+ Misses         26       25       -1     
  Partials        1        1              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.