Full-Stack React Projects - Second Edition

Searching by date range

In the Expenses view, users will have the option to view a list of expenses incurred within a specific date range. To implement a search form that allows users to pick a start and end date for the range, we will use DatePicker components from Material-UI Pickers.

In the view, we will add two DatePicker components to collect the first day and the last day of the query range, and also add a button to initiate the search, as shown in the following code.

mern-expense-tracker/client/expense/Expenses.js:

 div className={classes.search}     <MuiPickersUtilsProvider utils={DateFnsUtils}         <DatePicker          disableFuture          format="dd/MM/yyyy"          label="SHOWING RECORDS FROM"          views={["year", "month", "date"]}          value={firstDay} onChange={handleSearchFieldChange('firstDay')} ...