Ability to have 2 separate calendars for range selection

[RaphyRaph]

It's currently impossible to have range selection across 2 separate calendars that select a date independently. The calendars are tied, and can only span across 2 months. I'd like to have much wider ranges.

[gpbl]

Hi @RaphyRaph! Not sure I understand your question.

Are you trying to implement two instances of DayPicker? Or are you referring to the select elements, e.g. displaying January - March while skipping February in the middle?

To use 2 different instances of <DayPicker /> together, you may need to sync the selection and the calendar state:

https://stackblitz.com/edit/react-day-picker-9-2332-xg4dwt?file=src%2FApp.tsx

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

function App() {
  const [range, setRange] = useState<DateRange | undefined>(undefined);
  const [month, setMonth] = useState(new Date());

  return (
    <>
      <DayPicker
        mode="range"
        month={month}
        onMonthChange={setMonth}
        selected={range}
        onSelect={setRange}
      />
      <DayPicker
        mode="range"
        month={month}
        onMonthChange={setMonth}
        selected={range}
        onSelect={setRange}
      />
      <button onClick={() => setRange(undefined)}>Reset</button>
    </>
  );
}

export default App;

[RaphyRaph]

I'm referring to showing a range, but skipping the months in the middle, i.e. Jan-March, but not showing Feb

[gpbl]

@RaphyRaph For a more complex solution, see #2453.

In your case, what about hiding the month via CSS?

.rdp-month:nth-child(2) {
  display: none;
}