Range mode with Month/Years dropdown causes weird UX behaviour.

[duc-q]

Hi guys,

So I made a very simple range mode calendar, with Dropdown supported for both Months and Years, and disable/hide the Arrow navigation as intended to force User to select from the dropdown only.

Q: you might ask why I chose to hide the Navigation prev/next buttons?
A: In my case the field might relate to D.O.B fields so it might take too long to go to year 19xx, for example.

I notice some strange UX behavior when playing around with this:

Strange 1

• When selecting a Month in the "To" or 2nd Month dropdown, the new month will be assigned to the "From" or 1st Calendar.
  Selecting "June"

Have a look at the left calendar as June is selected.

Is this a bug or it's intended like that? Should the new month affect only on the selected calendar and adjust the other calendar accordingly?

Strange 2

• The precondition is previously I've selected a range, example Nov 24-27:

• When selecting December, on either calendar, the calendar will show only one ??? This looks weird and should it be "Nov 2025 - Dec 2025"?

Code sandbox link:

Let me know if those two are strange bugs or why, or is there any other ways to fix?

Thanks in advance

[gpbl]

@duc-q thanks for your report. You are right here - the dropdown should change the month where it is displayed, while now it changes the DayPicker starting month. This should be easy to fix, let me give it a look.

#2741

[gpbl]

When selecting December, on either calendar, the calendar will show only one ??? This looks weird and should it be "Nov 2025 - Dec 2025"?

This second case it is expected. When using this caption layout, the calendar is limited the last 100 years. You can change this behavior by setting the endMonth prop to another year in the future.

[duc-q]

When selecting December, on either calendar, the calendar will show only one ??? This looks weird and should it be "Nov 2025 - Dec 2025"?

This second case it is expected. When using this caption layout, the calendar is limited the last 100 years. You can change this behavior by setting the endMonth prop to another year in the future.

Thanks for your response, for case 2 I found a workaround by limiting only the dropdown to Years, and show the Prev/Next buttons again, also had a custom CustomNextButton component to "check" whether the next month is December, if it is, I'll manually set the month to November to make sure the calendars always show 2. I'll give a try on your suggestion and see if it works, actually it my case setting a future date is not the way I want, but let' see.

import { ButtonHTMLAttributes } from "react";
import { NextMonthButton, useDayPicker } from "react-day-picker";

/**
 * Render the next month button element in the calendar.
 *
 * @group Components
 * @see https://daypicker.dev/guides/custom-components
 */
export default function CustomNextMonthButton(
  props: ButtonHTMLAttributes<HTMLButtonElement>
) {
  const { components, goToMonth, nextMonth } = useDayPicker();

  return <components.Button {...props} onClick={value => {
    if (nextMonth && nextMonth.getMonth() === 11) { // Check if next month is December (index 11)
      const novemberDate = new Date(nextMonth);
      novemberDate.setMonth(10); // Set month to November (index 10)
      goToMonth(novemberDate);
    } else {
      props.onClick(value)
    }
  }} />;
}

export type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];

You might see the next button was disabled when month reaches December.