Fix: enable all years available in the year select dropdown

[rodgobbi]

What's Changed

Enable all years available in the year select dropdown. If after selecting the year, the selected month is before the startMonth or after the endMonth, the day picker selects the closest valid month.

Fix #2549

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation update

Demo

Screen.Recording.2024-12-06.at.18.33.14.mov

[rodgobbi]

@gpbl I found other potential improvements to the behavior of the day picker with the dropdown layout, which I'd like to share with you to discuss if they make sense and if they'd improve the day picker.
If you'd like to hear my suggestions, where do you prefer for me to post them to start a follow-up discussion?

[gpbl]

Hey @rodgobbi, thanks a lot for your PR.

I’ve been trying solution with the test case for #2549, but it doesn’t work as expected.

Here’s the code:

import { DayPicker } from “react-day-picker”;

export function Dropdown() {
  const from = new Date(2024, 9);
  const to = new Date(2025, 1);
  return <DayPicker startMonth={from} endMonth={to} captionLayout="dropdown" />;
}

This does render the list of disabled months, but January 2025 and February 2025 are not navigable via the dropdown menu.

Screen.Recording.2024-12-05.at.5.38.29.PM.mov

What I would try:

• Never disable the select options.
• When a select option changes, call useCalendar().goToMonth:

calendar.goToMonth(
	new Date(yearDropdownValue, monthDropdownValue)
);

goToMonth() function already navigates to the correct month if the selected option is not available.

...if I haven’t overlooked anything, this solution could resolve the issue.

What do you think?

[gpbl]

where do you prefer for me to post them to start a follow-up discussion?

Feel free to open a new issue! Thanks for asking!

[rodgobbi]

FYI @gpbl, this PR is already doing what you suggested 😅, I've added a screen recording to the PR to help visualize.
goToMonth was already called by the change handler of the select dropdown and it handles trying to select an invalid date, which is great.
I made all year options enabled by default, but left the month options disabled if they are invalid for the selected year, would you like to enable them also?
IMO though, disabling or hiding the invalid months make sense if they are not allowed to be selected.

[gpbl]

FYI @gpbl, this PR is already doing what you suggested 😅, I've added a screen recording to the PR to help visualize.

Sorry, my bad! Something was off when checking out the PR. I do see it works now! Let me give the code changes a review. 👀

---

I do still see an issue with the code below, where some months are not displayed. I think this is another bug as it happens also on the main branch.

export function Dropdown() {
  const from = new Date(2024, 9);
  const to = new Date(2025, 1);
  return <DayPicker startMonth={from} endMonth={to} captionLayout="dropdown" />;
}

[gpbl]

Thanks again for your work @rodgobbi !

[rodgobbi]

Happy to help @gpbl
Thanks for following up and merging, because I could not reproduce the issue you shared in your screenshot, the Dropdown example when I test in my machine works as expected.