[data grid] Date filter applying wrong date when using 'date' columns and string dates in timezones that are not UTC

[gustavhagland]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: Sandbox

Steps:

1. Set your time on you computer to 09:00 UTC
2. Set your timezone to UTC-09
3. Filter on a date in the table with 'is'
4. Then change the filter to one day earlier

Current behavior 😯

Only the date one day after the date in the filter shows up

Expected behavior 🤔

The date in the filter should match the dates in the table when using the is operator (the same behaviour is true for the other operators aswell).

Context 🔦

We are representing dates as strings in our project to avoid dealing with timezones as much as possible and have customers all around the world. Therefore the date filtering does not work for them as they are not in UTC all of the time.

Your environment 🌎

npx @mui/envinfo

System: OS: Linux 6.0 Arch Linux Binaries: Node: 19.0.1 - /usr/bin/node Yarn: Not Found npm: 8.19.2 - /usr/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: @emotion/react: 11.10.4 @emotion/styled: 11.10.4 @mui/base: 5.0.0-alpha.93 @mui/core-downloads-tracker: 5.10.1 @mui/icons-material: 5.10.9 => 5.10.9 @mui/lab: 5.0.0-alpha.103 => 5.0.0-alpha.103 @mui/material: 5.10.1 @mui/private-theming: 5.10.9 @mui/styled-engine: 5.10.8 @mui/system: 5.10.9 @mui/types: 7.2.0 @mui/utils: 5.10.9 @mui/x-data-grid: 5.17.7 @mui/x-data-grid-pro: 5.17.7 => 5.17.7 @mui/x-date-pickers: 5.0.4 @mui/x-date-pickers-pro: 5.0.4 => 5.0.4 @mui/x-license-pro: 5.17.0 @types/react: 18.0.21 => 18.0.21 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.8.4 => 4.8.4

Chromium browser was used

Order ID 💳 (optional)

No response

[m4theushw]

I noticed in the example that the generated dateCreated is later converted to a YYYY-mm-dd string. When doing this, the date object becomes a simple string, without the time zone. This causes the DataGrid to have to cast the string value back to a Date object to be able to filter the rows. To cast the value, we do new Date(dateString), but since the value provided is not formatted according to ISO 8601 it's treated as UTC. The problem you're encountering while filtering is happening because the value in the screen is not the same used during filtering. To solve the problem you should provide a ISO 8601 string or a Date object.

From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#syntax

When parsing date strings with the Date constructor (and Date.parse, they are equivalent), always make sure that the input conforms to the ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ) — the parsing behavior with other formats is implementation-defined and may not work across all browsers. Support for RFC 2822 format strings is by convention only. A library can help if many different formats are to be accommodated.

[gustavhagland]

Okey that does make sense, but the wierd thing is that the date filter InputComponent returns a string in the format: YYYY-mm-dd which is passed to the function provided by getApplyFilterFn. Then since both the column and the filterstring is in the same format, shouldn't they get compared using the same timezone (UTC) and therefore match?

[m4theushw]

Yes, but the tricky part is that we split the YYYY-mm-dd value received and pass its individual components to new Date(year, month, day). But doing so, the date is created considering the local time. The Date constructor behaves differently when receiving a date string or individual date components.

From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#syntax

Given at least a year and month, this form of Date() returns a Date object whose component values (year, month, day, hour, minute, second, and millisecond) all come from the following parameters. Any missing fields are given the lowest possible value (1 for day and 0 for every other component). The parameter values are all evaluated against the local time zone, rather than UTC.

Then since both the column and the filterstring is in the same format, shouldn't they get compared using the same timezone (UTC) and therefore match?

They appear to be in the same time zone, but when passed through new Date() they become different. My time zone is UTC-3, two Date objects will point to the same day but at different times. When we do dateA.getTime() === dateB.getTime(), which is how the date comparator works, it will be false.

Here's an example showing that if you provide a valid ISO 8601 date, then it will filter correctly according to what is seen on the screen.

[gustavhagland]

Ah okay I see. Then I will create a getApplyFilterFn for our project which converts the filterItem and column value in the same way.

Thank you for time and help!