Custom Month and Year dropdown using react-select

[brendonco]

Is there a way to custom the dropdown to use react-select?

https://react-day-picker.js.org/basics/navigation#using-a-drop-down-to-change-the-month

[gpbl]

@brendonco never tried it with react-select, but you can try implementing your own dropdown component using it, and pass it to the components prop:

import { DropdownProps } from 'react-day-picker';
function CustomDropDown(props: DropdownProps) {
  return <ReactSelect/>
}
export function CustomDayPicker() {
  return (
    <DayPicker
       components={{
         Dropdown: CustomDropDown
       }}
    />;
  );
}

https://react-day-picker.js.org/guides/custom-components
https://react-day-picker.js.org/api/interfaces/CustomComponents#dropdown

Let us know how far you go!

[brendonco]

@gpbl With Custom Month and Year dropdown, if I select Year Dropdown, how do I get the current Month dropdown selected value and vice versa? I can't seem to find a document.

Currently doing querySelector to get the value. If you have a document on how to get the current selected Month or Year, please do share. :)

document.querySelector('#MonthsDropdown')?.textContent;

[gpbl]

@brendonco it's difficult to understand what you are doing, without some code examples. Would you mind to for this code sandbox and provide some code? https://codesandbox.io/s/react-day-picker-8-vl4ry

Ideally, you would call goToMonth when the selects change. This will set the currentMonth in the calendar that you can use to know which month or year could be selected:

react-day-picker.js.org/guides/custom-components#custom-caption

[brendonco]

@gpbl After Upgrade to latest version, gotoMonth is working. One more thing, does multiple day selection work with captionLayout: dropdown ? Multiple day selection doesnt seem to work.

 <DayPicker
     captionLayout="dropdown"
     fromDate={new Date()}
     toDate={some date}
      mode="multiple"
      min={1}
      selected={days}
      onSelect={setDays}
      footer={footer}
    />

[gpbl]

@brendonco no reason it should not work, please reproduce your issue in https://codesandbox.io/s/react-day-picker-8-vl4ry and open a new discussion or bug if you can reproduce it, thanks

[brendonco]

components={{
         Dropdown: CustomDropDown
       }}

Here's the sample code on jumping to Year or Month using document.querySelector('#MonthsDropdown')?.textContent;

https://replit.com/@brendonco/React-Day-Picker-Multi-Day-Selection#src/App.tsx

Do you have similar API instead of using querySelector to jump to Month/Year? In order to jump to a Year with Month not selected, you have to get the current month selected and trigger gotoMonth. Any suggestion?