Range selector always changes end date

[worst-developer]

I think my question is trivial but still I could not find answer in the documentation. Default behavoir for type range selector is when user changes almost every date range range itself changes by using end date box but not begin. My question is next - how to change this behavoir or how I can call begin or end carret imperativley?

Screencast.from.26-12-24.13.46.32.webm

[rodgobbi]

@worst-developer you can use thetriggerDate parameter from the onSelect event handler prop (the second parameter), or the date parameter from the onDayClick event handler prop (the first parameter) to manually update the from or to dates of the selected DateRange based on your use case.
The selected date range passed to the event handlers by the day picker will still be based on the default behavior, but you can ignore it and overwrite it with a custom DateRange based on your logic. FYI this also requires passing the custom DateRange as the selected prop.

[worst-developer]

yes and no. Ideally I want this behavoir to be more clear. Here what I've did to bypass default from/to behavoir. Cause the problem is that selected by user field could be from and could be to depends on currentley selected dates, if before then selected by user field will be .from if future or between then current selected field will be inside .to

	enum TCarretPosition {
	  PICK = 'pick',
	  DROP = 'drop'
	}

    const [curretCurretPosition, setCarretPosition] = useState<TCarretPosition>(TCarretPosition.PICK)

     <DayPicker
        className="datepicker"
        mode="range"
        defaultMonth={date.from}
        selected={date}
// ------------------------------- here I've introcude parameter- `curretCurretPosition` to know what was the last user action 'pick' or 'drop'
        onSelect={(selectedRange) => {
          handleDateAction('select', selectedRange, curretCurretPosition)
          setCarretPosition((prevCurret) =>
            prevCurret === TCarretPosition.PICK ? TCarretPosition.DROP : TCarretPosition.PICK
          )
        }}
        disabled={{
          before: dayjs().toDate()
        }}
        numberOfMonths={numberOfMonths}
        required
        components={{
          PreviousMonthButton: (props: PreviousMonthButtonProps) => <CustomPrevArrow {...props} />,
          NextMonthButton: (props: NextMonthButtonProps) => <CustomNextArrow {...props} />
        }}
      />

Main logic here

if (action === 'select' && selectedDate) {
      if (curretAction === TCarretPosition.PICK) {
        const isFuture = dayjs(date.to).isBefore(selectedDate.to)
        const isBetween = dayjsIsBetween(selectedDate.to).isBetween(date.from, date.to)

        updatedDate = {
          from: isFuture || isBetween ? selectedDate.to : selectedDate.from,
          to: null
        }
      } else if (curretAction === TCarretPosition.DROP) {
        updatedDate = selectedDate
      }

      setDate(updatedDate)
    } 

[worst-developer]

It looks like spagetti or use single calendar but then there is a question what is the reason in range selector. As an example of behavoir I am talking look on kiwi.com or booking.com

[rodgobbi]

As an example of behavoir I am talking look on kiwi.com or booking.com

We can also find very famous applications where the behavior is more similar to the default one of the react-day-picker, like https://www.airbnb.com/, therefore it's not an unexpected default behavior or not following an industry standard.

yes and no. Ideally I want this behavoir to be more clear

There could be a different range of API to allow customization, but IMO it's clear that if you want to have a custom behavior when a user clicks on a day in the day picker, you can use the onDayClick event handler for that.
The day picker guarantees that the event handler will be called with the correct date value, and the consumer implements the logic to customize the behavior.

[worst-developer]

I'd like to argue your default behavoir but it makes no sense since you have your own vision of lib future.