[data grid] date changes to previous date for date input in datagrid filter dialog

[abcd-ca]

The problem in depth

I am using the MuiX data grid. I have a date column whose values are dates like 2024-04-24 (no time or time zone). In my column def, I have type: "date" and

valueGetter: (value: PGDate, row: BOMItemDG): Date | null => {
  return value ? DateTime.fromISO(value).toJSDate() : null;
},
valueFormatter: (date: Date): PGDate | null => {
  return date ? DateTime.fromJSDate(date, {}).toISODate() : null;
},

This uses Luxon for DateTime, FYI.

The CRUD for the column works fine.

The problem is when filtering: When I try to add a filter on that date field, the date input picker doesn't use the valueGetter or valueFormatter defined on the column and what happens is if I open the picker and select Apr 24, 2024, when the calendar part of the picker disappears and the date input remains in the filters popup, it quickly reverts to the previous date 2024-04-23. I can pick any date and it switches to the previous date relative to the one selected. Interestingly, it does seem to send the server the correct date and the filtering by the selected date does actually work, so this is appears to be a cosmetic front-end-only issue.

Note, I was experiencing something similar on the datagrid cell prior to adding the valueGetter/valueFormatter col definitions so maybe that's something you need to add to the filter API (or implementation).

I'm sure this has something to do with the selected date being interpreted as UTC vs local timezone, FYI as parsing the parts of the short date (2024-04-24) vs a timestamp can have this effect. I saw on some thread that seemed to be a comment from the MUI team that there were two ways that you've tried for constructing a JS Date including new Date("2024-04-24") vs new Date(2024, 04, 24) which yield different results, timezone wise. That might be a helpful lead. I can't remember where I read it, sorry.

Latest Chrome on macOS 13.6.6

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: filter date Order ID: 89501

[michelengelen]

Hey @abcd-ca could you provide us with a minimal reproduction example in codesandbox or stackblitz? This would help us a lot in finding a solution for you!

In the meantime I will have a look at the issue as well using the infos you provided

[michelengelen]

So, filtering and editing does work for me with the given valueGetter and valueFormatter functions...

Could you please try and replicate it then?

Also what timezone are you in? Might still be related.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.