[Data Grid] Fix filter datetime with seconds
closes #19974
Root Cause
The buildApplyFilterFn function in packages/x-data-grid/src/colDef/gridDateOperators.ts truncates seconds from both the filter value and row value before comparison for dateTime columns.
For equality operators (is, not), this is correct - comparing 7:30:00 to 7:30:30 should match since users can't input seconds in the filter UI.
But for comparison operators (after, before, onOrAfter, onOrBefore), truncating the row value causes incorrect filtering:
- User filters: "is after 02:09 PM"
- Filter value:
02:09:00(seconds truncated - correct) - Row value:
02:09:56→ truncated to02:09:00(wrong!) - Comparison:
02:09:00 > 02:09:00=false→ row incorrectly excluded
// Before fix - row seconds were always truncated
return (value: Date): boolean => {
const dateCopy = new Date(value);
if (showTime) {
dateCopy.setSeconds(0, 0); // Bug: truncates 02:09:56 to 02:09:00
}
return compareFn(dateCopy.getTime(), time);
};
Solution
Pass keepRawComparison=true (renamed from keepHours for clarity) for comparison operators to skip row value normalization.
Updated comparison operators to pass keepRawComparison:
{
value: 'after',
getApplyFilterFn: (filterItem) => {
return buildApplyFilterFn(filterItem, (v1, v2) => v1 > v2, showTime, showTime);
}, // keepRawComparison=true for dateTime ↑
},
{
value: 'onOrAfter',
getApplyFilterFn: (filterItem) => {
return buildApplyFilterFn(filterItem, (v1, v2) => v1 >= v2, showTime, showTime);
},
},
{
value: 'before',
getApplyFilterFn: (filterItem) => {
return buildApplyFilterFn(filterItem, (v1, v2) => v1 < v2, showTime, true);
}, // always true ↑
},
{
value: 'onOrBefore',
getApplyFilterFn: (filterItem) => {
return buildApplyFilterFn(filterItem, (v1, v2) => v1 <= v2, showTime, showTime);
},
},
- [x] I have followed (at least) the PR section of the contributing guide.
Deploy preview: https://deploy-preview-20557--material-ui-x.netlify.app/
Bundle size report
| Bundle | Parsed size | Gzip size |
|---|---|---|
| @mui/x-data-grid | 🔺+6B(0.00%) | 🔺+4B(0.00%) |
| @mui/x-data-grid-pro | 🔺+6B(0.00%) | 🔺+4B(0.00%) |
| @mui/x-data-grid-premium | 🔺+6B(0.00%) | 🔺+3B(0.00%) |
| @mui/x-charts | 0B(0.00%) | 0B(0.00%) |
| @mui/x-charts-pro | 0B(0.00%) | 0B(0.00%) |
| @mui/x-charts-premium | 0B(0.00%) | 0B(0.00%) |
| @mui/x-date-pickers | 0B(0.00%) | 0B(0.00%) |
| @mui/x-date-pickers-pro | 0B(0.00%) | 0B(0.00%) |
| @mui/x-tree-view | 0B(0.00%) | 0B(0.00%) |
| @mui/x-tree-view-pro | 0B(0.00%) | 0B(0.00%) |
Generated by :no_entry_sign: dangerJS against f313901cead031307e19197b0d8383257646ed12