CODEWITHSUNDEEP
reactjsreact-date-range
iowasandroid
iowasandroid

Reputation: 187

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

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.

enter image description here

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

Upvotes: 0

Views: 853

Answers (1)

Osama Bsher
Osama Bsher

Reputation: 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)}
/>

Upvotes: 0

Related Questions