[V9] Dropdown with disabled options

[theosenoussaoui]

Hello everyone, asking for your help here because I'm not sure if this is a bug or not.

In previous discussions, I thought that using the disabled prop allowed us to disabled years and months in the dropdown using captionLayout="dropdown". Adding a before Matcher does indeed disable days before the set Date(), but does nothing in the dropdown itself.

I also tried to disable those options by using a custom dropdown but unless there is a way to know if the dropdown is used for months or years, I can't do it reliably.

I have setup a very simple Codesandbox example to illustrate what I write. When I look at older examples, it looks like every year in the year dropdown before 2022 should be disabled.

If I missed something obvious or if the prop or Calendar are not used properly, please let me know.

[gpbl]

Hi @theosenoussaoui, the dropdowns are disabled by using the startMonth, endMonth props:

<DayPicker
    mode="single"
    captionLayout="dropdown"
    selected={selected}
    onSelect={setSelected}
-   disabled={{ before: new Date(2019, 1, 2) }}
+   startMonth={new Date(2019, 1)}
    required
/>

See https://daypicker.dev/docs/customization#caption-dropdown

The disabled prop is used to disable days.

[theosenoussaoui]

Thanks for the clarification, I just wish it was more obvious in the documentation (especially the dropdowns documentation, I think there is room for improvement).

I achieved what I had in mind for my feature, thanks a lot for your package (and your fast answer).

As an additional question, how would you know what dropdown (month and years) you're interacting with using custom Dropdown components ?

[gpbl]

As an additional question, how would you know what dropdown (month and years) you're interacting with using custom Dropdown components ?

This is a good question. At the moment, you could check the className prop which is passed to it. Its values are rdp-years_dropdown or rdp-months_dropdown.

For the next version we can add YearsDropdown and MonthsDropdown to the Custom Components, that would make it easier to customize one or the other.