Month navigation dropdown and buttons in v8

[pptheberge]

Hi,
The option to have dropdowns builtin is a great addition in v8 as we no longer require custom code to do it. That being said, we're wondering if it's possible to have an option to display both the buttons and the dropdowns. We have a use case where in most cases the date to pick will be close so the buttons are the best way to navigate from a user experience perspective but the time where the date can be several months in the future is still non-negligible and asking the user to click repeatedly to get to the date is not an ideal experience.

Is there an easier way to achieve this than reimplementing the Caption from scratch? There doesn't seem to be a way to import YearsDropdown and MonthsDropdown.

Thanks in advance

[gpbl]

My problem was including both as that there's a limited space:

Anyway, v8.0.2 has a smaller Caption component and the new CaptionNavigation / CaptionDropdowns components that should help in your task.

[pptheberge]

Thank you. With your help, 8.0.2 was all that was required. A simple custom caption and slightly reducing the font size on the caption did the trick.

Our code below for reference in case anyone else is trying to achieve this.

Thanks again,

export function CustomCaption(props) {
  const { classNames, styles } = useDayPicker();

  return (
    <div className={classNames.caption} style={styles.caption}>
        <CaptionDropdowns displayMonth={props.displayMonth} id={props.id} />
        <CaptionNavigation displayMonth={props.displayMonth} id={props.id} />
    </div>
  );
}

and when using DayPicker

....

    components={{
       Caption: CustomCaption,
       CaptionLabel: () => {
         return <></>;
       },
     }}
     styles={{
       caption: { fontSize: "90%" },
     }}

...