How could I reset a range on button click

[RaphaelGimenez]

Hi,

I have a hard time finding how I could clear a selected range on a <DayPicker mode="range" />

Here is a snippet of what my component looks like:

const RangeSelector = ({onChangeRange, range}) => {
  ...custom logic
  
  const resetRange = () => {
    onChangeRange({from: null, to: null})
  }
  
  return (
    <>
      <DayPicker mode="range" onSelect={onChangeRange} defaultRange={range} />
      <button onClick={resetRange}>rest</button>
    </>
  )
}

Here is what my user should be able to do:

• Select a range ✅
• Modify the range ✅
• Clear the range on reset button click ❌

Since the DayPickerRange can only take a defaultSelected prop I can't clear the range from the outside once it's selected.

By making my own range selector modifier with mode="uncontrolled" I can do this reseting feature because I'm the one in charge of the state. But since this is an already implemented feature (range selection), I'd prefer not to copy/paste already existing code.

I feel that I'm missing something ...

Edit:

Here is my working component

const RangeSelector = ({onChangeRange, range}) => {
  ...custom logic
  const [modifiers, dayClickHandler] = useRange(range, onChangeRange);
  
  const resetRange = () => {
    onChangeRange({from: null, to: null})
  }
  
  return (
    <>
      <DayPicker mode="uncontrolled" onDayClick={dayClickHandler} selected={range} modifiers={modifiers}/>
      <button onClick={resetRange}>rest</button>
    </>
  )
}

useRange:

import { isAfter, isBefore, isSameDay } from "date-fns";

function addToRange(day, range) {
  const { from, to } = range || {};
  if (!from) {
    return { from: day, to: day };
  }
  if (!to && isSameDay(from, day)) {
    return undefined;
  }
  if (!to && isBefore(day, from)) {
    return { from: day, to: from };
  }
  if (!to) {
    return { from, to: day };
  }
  if (isSameDay(to, day) && isSameDay(from, day)) {
    return undefined;
  }
  if (isSameDay(to, day)) {
    return { from: to, to };
  }
  if (isSameDay(from, day)) {
    return undefined;
  }
  if (isAfter(from, day)) {
    return { from: day, to };
  }
  return { from, to: day };
}

const useRange = (dates, onChangeDates) => {
  const modifiers = {
    selected: [],
    range_start: [],
    range_end: [],
    range_middle: [],
    disabled: [],
  };

  if (dates) {
    modifiers.selected = [dates];
    if (dates.from) {
      modifiers.range_start = [dates.from];
      if (dates.to) {
        modifiers.range_middle = [
          {
            after: dates.from,
            before: dates.to,
          },
        ];
        modifiers.range_end = [dates.to];
      } else {
        modifiers.range_end = [dates.from];
      }
    }
  }

  const dayClickHandler = (day) => {
    const range = addToRange(day, dates);
    onChangeDates(range);
  };

  return [modifiers, dayClickHandler];
};

export default useRange;

[lariane-guerra]

Someone can help here? The same issues, i clear the values but the styles continues in the range.

[gpbl]

Thanks @RaphaelGimenez for the bug report. This issue has been fixed in v9.0.3. Please upgrade via npm install react-day-picker@latest and report back if it still doesn't work for you 🙏🏽