diff --git a/packages/x-data-grid/src/colDef/gridDateOperators.ts b/packages/x-data-grid/src/colDef/gridDateOperators.ts index a25a488e14301..d6bf42a280855 100644 --- a/packages/x-data-grid/src/colDef/gridDateOperators.ts +++ b/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 { if (!filterItem.value) { return null; @@ -35,7 +35,7 @@ function buildApplyFilterFn( return false; } - if (keepHours) { + if (keepRawComparison) { return compareFn(value.getTime(), time); } @@ -72,7 +72,12 @@ 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' }, @@ -80,7 +85,12 @@ export const getGridDateOperators = ( { 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' }, @@ -88,12 +98,7 @@ export const getGridDateOperators = ( { 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' }, @@ -101,7 +106,12 @@ export const getGridDateOperators = ( { 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' }, diff --git a/packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx index 06427dd092f30..95114f9ceffb2 100644 --- a/packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/filtering.DataGrid.test.tsx @@ -1053,6 +1053,60 @@ describe(' - 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( + (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', () => {