[Data Grid] Fix filter datetime with seconds

packages/x-data-grid/src/colDef/gridDateOperators.ts

@@ -9,7 +9,7 @@ function buildApplyFilterFn(
   filterItem: GridFilterItem,
   compareFn: (value1: number, value2: number) => boolean,
   showTime?: boolean,
-  keepHours?: boolean,
+  keepRawComparison?: boolean,
 ): ReturnType<GetApplyFilterFn> {
   if (!filterItem.value) {
     return null;
@@ -35,7 +35,7 @@ function buildApplyFilterFn(
       return false;
     }
 
-    if (keepHours) {
+    if (keepRawComparison) {
       return compareFn(value.getTime(), time);
     }
 
@@ -72,36 +72,46 @@ export const getGridDateOperators = (
   {
     value: 'after',
     getApplyFilterFn: (filterItem) => {
-      return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
+      return buildApplyFilterFn(
+        filterItem,
+        (value1, value2) => value1 > value2,
+        showTime,
+        showTime,
+      );
     },
     InputComponent: GridFilterInputDate,
     InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
   },
   {
     value: 'onOrAfter',
     getApplyFilterFn: (filterItem) => {
-      return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
+      return buildApplyFilterFn(
+        filterItem,
+        (value1, value2) => value1 >= value2,
+        showTime,
+        showTime,
+      );
     },
     InputComponent: GridFilterInputDate,
     InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
   },
   {
     value: 'before',
     getApplyFilterFn: (filterItem) => {
-      return buildApplyFilterFn(
-        filterItem,
-        (value1, value2) => value1 < value2,
-        showTime,
-        !showTime,
-      );
+      return buildApplyFilterFn(filterItem, (value1, value2) => value1 < value2, showTime, true);
     },
     InputComponent: GridFilterInputDate,
     InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
   },
   {
     value: 'onOrBefore',
     getApplyFilterFn: (filterItem) => {
-      return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
+      return buildApplyFilterFn(
+        filterItem,
+        (value1, value2) => value1 <= value2,
+        showTime,
+        showTime,
+      );
     },
     InputComponent: GridFilterInputDate,
     InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },

packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx

@@ -1053,6 +1053,60 @@ describe('<DataGrid /> - Filter', () => {
         '1/1/2001, 8:30:00 AM',
       ]);
     });
+
+    // https://github.com/mui/mui-x/issues/19974
+    describe('should consider seconds when filtering', () => {
+      const getRowsWithSeconds = (operator: string) => {
+        const { unmount } = render(
+          <TestCase
+            filterModel={{
+              items: [{ field: 'date', operator, value: '2001-01-01T07:30' }],
+            }}
+            rows={[
+              { id: 1, date: new Date(2001, 0, 1, 7, 29, 30) },
+              { id: 2, date: new Date(2001, 0, 1, 7, 30, 0) },
+              { id: 3, date: new Date(2001, 0, 1, 7, 30, 30) },
+            ]}
+            columns={[
+              {
+                field: 'date',
+                type: 'dateTime',
+                valueFormatter: (value?: Date) => (value ? value.toLocaleString('en-US') : ''),
+              },
+            ]}
+          />,
+        );
+        const values = getColumnValues(0);
+        unmount();
+        return values;
+      };
+
+      it('should filter with operator "after"', () => {
+        // 7:30:30 is after 7:30:00, should be included
+        expect(getRowsWithSeconds('after')).to.deep.equal(['1/1/2001, 7:30:30 AM']);
+      });
+
+      it('should filter with operator "onOrAfter"', () => {
+        // 7:30:00 and 7:30:30 are on or after 7:30:00
+        expect(getRowsWithSeconds('onOrAfter')).to.deep.equal([
+          '1/1/2001, 7:30:00 AM',
+          '1/1/2001, 7:30:30 AM',
+        ]);
+      });
+
+      it('should filter with operator "before"', () => {
+        // 7:29:30 is before 7:30:00, should be included
+        expect(getRowsWithSeconds('before')).to.deep.equal(['1/1/2001, 7:29:30 AM']);
+      });
+
+      it('should filter with operator "onOrBefore"', () => {
+        // 7:29:30 and 7:30:00 are on or before 7:30:00
+        expect(getRowsWithSeconds('onOrBefore')).to.deep.equal([
+          '1/1/2001, 7:29:30 AM',
+          '1/1/2001, 7:30:00 AM',
+        ]);
+      });
+    });
   });
 
   describe('column type: boolean', () => {