mui-x icon indicating copy to clipboard operation
mui-x copied to clipboard

[Data Grid] Fix filter datetime with seconds

Open siriwatknp opened this issue 1 month ago • 1 comments

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:

  1. User filters: "is after 02:09 PM"
  2. Filter value: 02:09:00 (seconds truncated - correct)
  3. Row value: 02:09:56 → truncated to 02:09:00 (wrong!)
  4. 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);
  },
},

siriwatknp avatar Dec 04 '25 04:12 siriwatknp

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%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against f313901cead031307e19197b0d8383257646ed12

mui-bot avatar Dec 04 '25 04:12 mui-bot