Date filter variant's tooltip showing incorrect date to what is being filtered

[Phillbaska]

material-react-table version

3.0.1

react & react-dom versions

18.3.1

Describe the bug and the steps to reproduce it

When a column's filter has been configured with the variant "date" and a date has been chosen from the date picker, on hover of the filter icon the tooltip is showing the wrong date ( one day in the past and always 23:00:00hrs )

I have replicated and attached a stackblitz sandbox to demonstrate the issue. Simply open the filters and select a date, then hover over the filter button to display the tooltip.

Minimal, Reproducible Example - (Optional, but Recommended)

https://stackblitz.com/edit/github-nzxxgn?file=src%2FTS.tsx

Screenshots or Videos (Optional)

No response

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

No, because I do not know how, however i believe the tsx for the filter label is within material-react-table/src/components/head/MRT_TableHeadCellFilterLabel.tsx

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.

[rclankhorst]

I've come across your issue during a search on how to customize these tooltips, as they don't work very well for me either.

I'm going to guess however, that it's taking your browser's timezone into account. If you're in West Europe, you're currently running GMT +1, for example.

When selecting a date without a time, it will be set to the entered day at 00:00:00 in the browser's timezone. The tooltip seems to render the value without that timezone applied, effectively subtracting one hour and ending up the day before.

[Phillbaska]

@rclankhorst that would make sense as i'm UTC + 1 timezone.

Checking the code ( and not knowing what i'm doing so could be totally wrong) i can see in line 404-418 of MRT_FilterTextField the DatePicker does not have a slot prop of time zone.

       <DatePicker
          {...commonDatePickerProps}
          {...datePickerProps}
          slotProps={{
            field: {
              clearable: true,
              onClear: () => handleClear(),
              ...datePickerProps?.slotProps?.field,
            },
            textField: {
              ...commonTextFieldProps,
              ...datePickerProps?.slotProps?.textField,
            },
          }}
        />

According to the date MUI date picker API you need to have "timezone" of "default" to use the localisation providers timezone.

perhaps it should be:

<DatePicker
          {...commonDatePickerProps}
          {...datePickerProps}
          slotProps={{
            field: {
              timezone:'default',
              clearable: true,
              onClear: () => handleClear(),
              ...datePickerProps?.slotProps?.field,
            },
            textField: {
              ...commonTextFieldProps,
              ...datePickerProps?.slotProps?.textField,
            },
          }}
        />

Though like i mentioned, i'm out of my depth here.

[rclankhorst]

If you want to add props to specific components nested deeper in the object structure, you can usually refer to them by using the mui*Props props, in either the table or column definitions. To set the timezone prop on the DatePicker that would be rendered, you'd do this:

 {
        accessorKey: 'date',
        header: 'Date',
        filterVariant: 'date',
        accessorFn: (row) => new Date(row.date),
+       muiFilterDatePickerProps: { timezone: 'default' },
        Cell: ({ cell }) => cell.getValue<Date>()?.toLocaleDateString(), //render Date as a string
},

Before setting that prop will work, you'd need to implement the utc and timezone plugins for dayjs:

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone'; // Only if you need timezones specifically
dayjs.extend(utc);
dayjs.extend(timezone); // Only if you need timezones specifically

In a fork of your Stackblitz project I've attempted to do just this by setting the timezone prop of the picker to UTC, and it generated the following result:

I think this might be what you're after. If not, let me know.

[Phillbaska]

Hi @rclankhorst, that worked fine for me. Thank you.

I think this has clicked in my head now. I'm understanding correctly the selected value displayed in the datePicker field was localised, but the filter tooltip/actual underlying value was actually -1 hour due to my browser locale.

Therefore i needed to specify that UTC within the timezone prop for so the underlying value is not modified

Is that correct?

my column data dates are just iso date strings at the moment, but i'm guessing if i ever changed to include the utc offset i'd need to switch back to browser locale?