Manually select a range with useSelectRange?

[Gusis93]

Hi, been enjoying the picker very much but I'm trying to get a specific use working and I can't.

I've seen in another answer where it was mentioned you didn't want to support presets (#876). I've been trying to achieve presets with custom components but I can't.

Seems like useSelectRange returns onDayClick which only accepts 1 Date and a range is selected only if a day was previously selected in the calendar.

Is this supported? Or would this need a change?

Would a PR on this be accepted or is not supposed to be supported?

[gpbl]

Hey @Gusis93 what are you trying to do? If you are trying to add different ways to select days, check out this: https://react-day-picker.js.org/basics/selecting-days#custom-selections

basically by playing with the onDayClick and select prop - you can decide what should happen when a day is clicked. In DayPicker, we are using these props as well for implementing the single/multiple/range selection modes.

[Gusis93]

I'm trying to create presets like This Month Today Yesterday and render them in the footer. But I cannot find a way to manually select a range with onDayClick

From what I've read in the source code

react-day-picker/src/contexts/SelectRange/SelectRangeContext.tsx

Line 97 in a86122a

const newRange = addToRange(day, selected);

the onDayPicker only accepts 1 Date

[gpbl]

@Gusis93 Let me understand - are you trying to add a button to select the whole month or today or yesterday?

Screen.Recording.2023-10-31.at.18.17.56.mov

See https://codesandbox.io/s/react-day-picker-forked-twvvdp?file=/src/App.tsx

export default function App() {
  const [month, setMonth] = useState(new Date());
  const [selectedRange, setSelectedRange] = useState();

  const selectWholeMonth = () =>
    setSelectedRange({
      from: startOfMonth(month),
      to: endOfMonth(month)
    });

  const selectMonthButton = (
    <button onClick={selectWholeMonth}>
      Select {format(month, "MMMM YYY")}
    </button>
  );

  return (
    <DayPicker
      mode="range"
      month={month}
      onMonthChange={setMonth}
      selected={selectedRange}
      onSelect={setSelectedRange}
      footer={selectMonthButton}
    />
  );
}

[Gusis93]

Okay, that makes more sense. I was trying to do it the complicated way then.

I would think the useSelectRange hook would actually return something like this to select a range. I don't really understand whats the purpose of this hook then?

Thank you so much for the help and taking the time to answer.