Range should start new if one already selected

[NeilRiver]

Description

Hello! the range does not work correctly

Expected Behavior

1 click - start of range 2 clicks - end of range 3 clicks - new range

Actual Behavior

the range does not reset to zero, but tries to expand

  const [date, setDate] = React.useState<DateRange | undefined>();

          <Calendar
            initialFocus
            locale={ru}
            mode='range'
            defaultMonth={date?.from}
            selected={date}
            onSelect={setDate}
            numberOfMonths={2}
          />

[NeilRiver]

I have cognitive dissonance, as I understand it, this behavior is “expected”. The question is why?

I managed to find a fork in which everything works well, I also looked at the documentation for version 7, adequate behavior was already implemented there. I really have a lot of questions: why did you do this?

https://blueprintjs.com/docs/#datetime2/date-range-picker3 https://react-day-picker-v7.netlify.app/examples/selected-range-enter

to get adequate behavior, do I need to use a fork or an old version?

[JordanDDisch]

+1 here as well on this. If you dig through the Blueprint UI code for their datepicker you can see they are doing some pretty custom stuff with the dateRange object using dayPickerProps instead of a normal: const onDateRangeChange = (dateRange: DateRange|undefined): void => {

https://github.com/palantir/blueprint/blob/develop/packages/datetime2/src/components/date-range-picker3/contiguousDayRangePicker.tsx#L54

Also @NeilRiver you can reset the date by clicking on the start date. Not ideal but that seems to be the default.

There are different UX behaviours for the range pickers. Also Airbnb in my opinion is a gold standard UX use case. Theirs is slightly different and doesn't reset but changes the start or end date based on the input you select. https://react-dates.github.io/react-dates/?path=/story/daterangepicker-drp--default

[Peeeep]

This can be archived by utilising the second parameter of the SelectRangeEventHandler:

const [date, setDate] = useState<DateRange>({ from: undefined });

const handleSelect: SelectRangeEventHandler = (nextRange, selectedDay) => {
  setDate((range) => {
    if (range.from && range.to) return { from: selectedDay };
    return nextRange as DateRange;
  });
};

return <DayPicker mode="range" selected={date} onSelect={handleSelect} />;

https://github.com/gpbl/react-day-picker/assets/6132343/4054eebb-088c-419b-8096-1ecaf1ed2186

(IMHO this should be the default behaviour)

[NeilRiver]

@Peeeep wow, i also came up with a similar solution. There are some awkward questions for the author... why the whole world works according to the 'new range' principle, but only here it should be different. This is not the level of a library that is downloaded by a million people.

[gpbl]

This is not the level of a library that is downloaded by a million people.

@NeilRiver please be kind and do not burn the maintainer out. I am one single dev against "a million people". Be constructive with your comments, thanks.

[NeilRiver]

@gpbl I'm sorry, I went too far. Tell me, do you have an official solution to our issue?

[gpbl]

@NeilRiver no worries!

A better range behavior will be released in the next major version: an alpha will be released by end-of-month as an early preview.

This solution is for now a good workaround. There's also a discussion going on: https://github.com/gpbl/react-day-picker/discussions/2050.

Thanks for your patience!

[gpbl]

@NeilRiver this is going to be fixed in v9, see an example here:

https://react-day-picker.js.org/next/using-daypicker/selection-modes#range-mode

does it works according your requirements? We are still iterating over it.

[NeilRiver]

@gpbl Thank you very much! Will wait! At the moment, according to the solution above - everything is ok!