I am having really hard time implementing date range filtering using react-table and Date Range Picker from MUI Pickers. To tell the truth I have no idea how to implement this. Below is what I was trying to do. Please help.
This is my custom Date Range Filter:
export const SelectDateRangeFilter = ({
column: { filterValue = [null, null], preFilteredRows, setFilter, id },
}) => {
const [selectedDate, setSelectedDate] = useState([null, null])
return (
<LocalizationProvider dateAdapter={DateFnsUtils} locale={localeMap.pl}>
<DateRangePicker
startText="From"
endText="To"
value={selectedDate}
mask={maskMap.en}
onChange={(date) => {
setSelectedDate(date)
setFilter((old) => {
return [Date.parse(date[0]) / 1000, Date.parse(date[1]) / 1000]
})
}}
disableFuture
name="calendar"
renderInput={(startProps, endProps) => (
<>
<CustomMuiTextField size="small" {...startProps} />
<CustomMuiTextField size="small" {...endProps} />
</>
)}
/>
</LocalizationProvider>
)
}
And this is the column:
{
Header: 'Date',
accessor: 'createTimestamp.seconds',
Filter: SelectDateRangeFilter,
filter: 'between',
Cell: (props) => {
const date = format(
fromUnixTime(props.row.original.createTimestamp.seconds),
'dd-MM-yyyy',
)
return date
},
},