react-date-range: Detect only after both start and end dates are selected

Question

I am working on a dashboard page using react js and I am using react-date-range plugin to select activities by date range. Below is the configuration of the react-date-range.

export default function Daterange() {
let [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: null,
      key: 'selection'
    }
  ]);

const handleSelect = (changes) => {
    setState([changes.selection]);
    console.log("Trigger search");
};

return (
<div>
    <DateRange
      editableDateInputs={true}
      //onChange={item => setState([item.selection])}
      moveRangeOnFirstSelection={false}
      retainEndDateOnFirstSelection={false}
      ranges={state}
      onChange={item => handleSelect(item)}
    />
</div>
)
}

Currently what is happening is that once the startDate is selected in the UI, the endDate also gets initialized with the value same as the startDate, and thus the function handleSelect gets triggered. In the below image you can see that I have only selected the startDate, but the value of endDate also gets initialized to startDate even though I have not selected the endDate.

How do I ensure that the handleSelect gets triggered only after both startDate and endDate are explicitly selected in the UI?

Answer 1

You can do this by setting the retainEndDateOnFirstSelection property to true:

<DateRange
  editableDateInputs={true}
  //onChange={item => setState([item.selection])}
  moveRangeOnFirstSelection={false}
  retainEndDateOnFirstSelection={true}
  ranges={state}
  onChange={item => handleSelect(item)}
/>