Does Range mode support selection across years?

[EliazTray]

Link https://stackblitz.com/edit/vitejs-vite-n7wsxy?file=src%2FApp.tsx

Code

Please include the code required to reproduce the bug.

import { useState } from 'react';
import { Select } from 'antd';
import { DayPicker, DayProps, DropdownProps } from 'react-day-picker';
import 'react-day-picker/style.css';

export default () => {
  const [value, setValue] = useState();
  console.log(value, 'value');
  return (
    <DayPicker
      captionLayout="dropdown"
      selected={value}
      onSelect={setValue}
      mode="range"
      numberOfMonths={2}
      components={{
        // DayButton: (props: DayProps) => <A {...props} />,
        Dropdown: (props: DropdownProps) => <A {...props} />,
      }}
    />
  );
};

function A(props) {
  console.log(props, 'props');
  function handleChange(val) {
    console.log(val);
    props.onChange({
      target: {
        value: val,
      },
    });
  }
  return (
    <Select
      {...props}
      value={props.value}
      options={props.options}
      onChange={handleChange}
    />
  );
}

Expected Behavior

when select different year, it can support across year, such like left is "2023",right is "2024"

Actual Behavior

when you select "2023", both left and right will change to "2023".

[gpbl]

@EliazTray the number of months prop is used to display consecutive months. If you need two calendar independent each others, you can use two instances of DayPicker:

• share the same range between the two calendars
• play with startMonth and endMonth to better the behavior for the left/right calendar:

https://stackblitz.com/edit/vitejs-vite-bfqtrh?file=src%2FApp.tsx

Screen.Recording.2024-09-22.at.6.10.39.PM.mov

import { useState } from 'react';
import { DateRange, DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';

export default () => {
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(2024, 1, 10),
    to: new Date(2025, 5, 3),
  });
  const [leftMonth, setLeftMonth] = useState<Date | undefined>(range?.from);
  const [rightMonth, setRightMonth] = useState<Date | undefined>(range?.to);
  return (
    <div style={{ display: 'flex', gap: '2em', margin: '1em' }}>
      <DayPicker
        captionLayout="dropdown"
        selected={range}
        onSelect={setRange}
        mode="range"
        month={leftMonth}
        onMonthChange={setLeftMonth}
        startMonth={new Date(2020, 1)}
        endMonth={rightMonth}
      />
      <DayPicker
        mode="range"
        captionLayout="dropdown"
        selected={range}
        onSelect={setRange}
        month={rightMonth}
        onMonthChange={setRightMonth}
        startMonth={leftMonth}
        endMonth={new Date(2034, 11)}
      />
    </div>
  );
};

[gpbl]

There's a similar question by @RaphyRaph in #2338.