React (Blueprint - DateRangeInput)

Viewed 9

I'm trying to implement a DateRangeInput from the Blueprint lib. I'm, however, struggling to define when I'd like to update the data to re-render.

Currently, I'd like to filter a pool of data based on the user's selection when they've completed filling in the field. However, the onChange method is called whenever a text field date changes. Which is causing a lot of recomputing. I was wondering if there was a way to piggyback off the pop-up closure to recompute.

Blueprint - DateRangeInput POP UP

  useEffect(() => {
    if(!SetDateRangeFilter)
        return;      
    
    SetDateRangeFilter(dateRange); //this change causes the map to rerender.    
}, [dateRange]);    


return (<DateRangeInput                                                        
                allowSingleDayRange={true}                                                   
                value= {dateRange}
                formatDate={date => date.toLocaleDateString()}
                parseDate = {str => new Date(str)}
                contiguousCalendarMonths={true}
                shortcuts={true}
                closeOnSelection={true}
                onChange={(selectedRange => setDateRange(selectedRange))}
                minDate = {new Date(1900,0,1,0,0,0)}
                maxDate = {new Date(2100,0,1,0,0,0)}                                           
            />);
0 Answers
Related