-
-
Notifications
You must be signed in to change notification settings - Fork 696
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Out of range dropdown options should be disabled #1814
Comments
Hey @ZakisM thanks for your report, definitely there's space for improvements here. Will check it out better later.
There's a way to know the https://codesandbox.io/s/react-daypicker-forked-62vjs7?file=/src/App.tsx:213-314 import { useNavigation } from "react-day-picker";
function CustomDropdown(props: DropdownProps) {
const navigation = useNavigation();
console.log("Displayed months: ", navigation.displayMonths);
return <Dropdown {...props} />;
} |
Hey, I think I tried this, however when you have multiple months an array is returned. How would I then know which index I need to use for the CustomDropdown? |
Ah I think this is the reason I chose to not disable these dropdowns. I think this issue doesn't really affect the usability of DayPicker. What's the actual problem when the dropdown are not disabled? |
Ah I see, the issue is that when the dropdowns are not disabled, if I pick one of the months from the dropdown, the date picker is now showing dates that are outside of the fromDate/toDate I set: recording.mov |
With #1884 we are adding the |
Bug description
The dropdowns that are out of range should be disabled if they are after toDate.
To reproduce
https://codesandbox.io/s/react-daypicker-forked-ymyrvh
Steps
Expected behavior
The dropdown for the month January and dropdown for the year 2026 should be disabled, as this is out of range. The arrow is disabled correctly in this case, but the dropdowns are not.
Screenshots
Additional context
It's possible to fix this currently but it requires duplicating a lof the components and creating a custom
Caption
component. If we had access to thedisplayMonth
prop inside of theDropdown
component it would make it possible to disable this, which would also be useful:For example a custom Dropdown Component with our own
data-disabled
prop.The text was updated successfully, but these errors were encountered: