Between Inclusive date-range filter doesn't appear to be working

[dgelineau]

material-react-table version

v2.11.3

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

If we navigate to the default filtering example codesandbox found below and set the Hire Date filter to be 02/23/2016 to 02/23/2016, no rows will be returned even though we have a row with a date that is equal to that date as shown below (This also appears to be an issue if we only set the end date to be 02/23/2016).

{
    isActive: true,
    name: "Tanner Linsley",
    hireDate: "2016-02-23T18:25:43.511Z",
    arrivalTime: "2016-02-23T18:25:43.511Z",
    departureTime: today(),
    age: 42,
    salary: 100_000,
    city: "San Francisco",
    state: "California",
}

I'm not sure if this is intended behavior as this filter appears to be Between Inclusive by default so I would expect that date to appear with those filter values or if there is another way to get these dates to appear in these scenarios.

Minimal, Reproducible Example - (Optional, but Recommended)

https://codesandbox.io/p/devbox/angry-wildflower-2th6tf

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

None

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

If you're working with Dates, there's usually a lot more setup with filterFns and rounding off the dates that you have to do. Make sure you do that first before claiming that the filterFn doesn't work.

[dgelineau]

I understand there may have to be more work to do around rounding off the dates; but in the example provided in the documentation for filtering; shouldn't the Tanner Linsley row with a hire date of 02/23/2016 show up when you filter between 02/23/2016 and 02/23/2016 inclusively?

In this case, would the approach be to remove the time from the dates before they're passed into the table since the date selection appears to be at a specific time rather than start of day and end of day?

Edit: After doing some more digging; I believe the issue is the fact that in the example we have an instance of a dayjs object for the filter value object but a Date object for the row value; if we run the equals filterFn on the two values which is called from the betweenInclusive filterFn, they'll return two different strings for the same date:

Example with Date: 02/23/2016

1. Dayjs after running .toString().toLowerCase().trim() = tue, 23 feb 2016 05:00:00 gmt
2. Date after running .toString().toLowerCase().trim() = tue feb 23 2016 00:00:00 gmt-0500 (eastern standard time)

If I change the accessorFn to be of type Dayjs this solves the issue since the string comparison will pass.