onSelect returned value issue with "range" mode in v9

[melkras]

Hello everyone,

I'm working on migrating from v8 and noticed something when using "range" mode. The onSelect callback returns an object with both from and to values defined, even if I only click on the from date. Essentially, the from and to values are duplicated until I actually select the to date, which is unexpected.
This behavior is different from how it worked in v8, where the to value is undefined until I select the to date.

Also when looking at the DateRange type, it clearly states that to value can be undefined.

If this change is intentional, I'm struggling to understand how it’s useful.
Why is this duplication needed? It forces me to add an extra layer of state just to check which dates the user actually selected — feels like unnecessary complexity, to be honest.

[gpbl]

@melkras I believe the feature you are looking for is behind the min={1} prop:

<DayPicker mode="range" min={1} />

https://daypicker.dev/docs/selection-modes#min-and-max-dates-1

When setting the "minimum nights" to 1, the to value will be undefined until you select at least one night.

[melkras]

Thanks for the quick response.
I must have overlooked this in the documentation.

In my use case, the calendar needs to function as it did in V8. This means that the first click on a Day button selects the start date, and the second click on a Day button selects the to date. Consequently, if the same Day button is clicked twice, it selects a single day.
I see that setting min={1} is not sufficient for this since it requires at least 1 night difference in start and to dates.
How could I achieve the same result as in the previous version.

[gpbl]

@melkras not sure I understand correctly your requirements. It looks like you want users click twice on the same day, before confirming the want a range made up of the same day.

in this case you will need to control the selection with the selected prop:

export function Example() {
  const [selected, setSelected] = useState<DateRange | undefined>();

  const handleOnSelect = (range: DateRange | undefined, triggerDate: Date) => {
    if (range?.from && range?.to && isSameDay(range.to, triggerDate)) {
      // 1st click on the same selected day
      setSelected({ from: triggerDate, to: undefined });
    } else if (
      selected?.from &&
      !selected.to &&
      isSameDay(selected.from, triggerDate)
    ) {
	  // 2nd click on the same selected day
      setSelected({ from: selected.from, to: triggerDate });
    } else {
      setSelected(range);
    }
  };

  return (
    <DayPicker
      mode="range"
      required
      selected={selected}
      onSelect={handleOnSelect}
    />
  );
}

[melkras]

Thank you, this worked out well for me.