# Date filter A column with `editorType: 'date'` (or `'datetime'`) gets the **date** filter operator set: `equals`, `lessThan`, `greaterThan`, **`between`**, `isBlank`. `@svgrid/enterprise` adds days-from-today operators (below). > Live demo: Filter - between operator - https://svgrid.com/demos/64-filter-between-operator/ ```ts const columns: GridColumns = [ { field: 'joinedAt', header: 'Joined', editorType: 'date', format: { type: 'date', pattern: 'y-m-d' }, }, ] ``` ## Value format Store dates as **ISO date strings** (`YYYY-MM-DD`) or as `Date` objects. The grid compares them via `Date.parse()` so both forms work, but stick to one for sort stability. For `'datetime'`, use full ISO 8601: `2026-05-27T14:32:00Z`. ## Date range Both surfaces use the same controls: a date picker for the single-value operators, and one range field for **Between** - two-month calendar, both ends in a single gesture. A range needs both ends before it filters anything. Pick **Between** in the column menu's operator picker. The wrapper renders two date inputs (From / To); both endpoints are **inclusive**. ```ts api.setFilter('joinedAt', { operator: 'between', value: '2026-01-01', valueTo: '2026-12-31', }) ``` The headless filter helper works the same: ```ts import { applyExcelFilter } from '@svgrid/grid' applyExcelFilter('2026-05-27', { id: 'joinedAt', operator: 'between', value: '2026-01-01', valueTo: '2026-12-31', }) // → true ``` The filter is inactive until both endpoints are non-empty. ## Today, overdue, next 7 days (Enterprise) `@svgrid/enterprise` adds five operators to every date column's filter menu once `enableRelativeDateFilters()` has run (`installEnterprise` runs it too; [setup](https://github.com/sv-grid/sv-grid/blob/main/docs/enterprise/README.md#grid-filter-and-sort-additions)). They count whole days from today, in the user's local time, and take no value, so picking one in the menu filters at once: | Operator | Menu label | Keeps | | ------------- | ------------ | -------------------------------------------- | | `today` | Today | today | | `beforeToday` | Before today | every earlier day: overdue items | | `afterToday` | After today | every later day | | `next7Days` | Next 7 days | today through the same weekday next week | | `last7Days` | Last 7 days | the same weekday last week through today | Blank cells never match. A bare `'2026-05-27'` counts as that day in local time, not UTC midnight. From code they are ordinary operators: ```ts api.setFilter('due', { operator: 'beforeToday' }) ``` "Today" is read when the filter is applied, so a page left open past midnight keeps the old day until the filter changes. **Server-side data.** A server data source never receives these operators. The grid sends the absolute filter they mean at request time: `beforeToday` as `lessThan` today's date, `next7Days` as `between` today and a week out, dates as local `YYYY-MM-DD`. Under `externalFilter`, `onFiltersChange` passes the relative operator through, so a saved view still means "overdue" tomorrow; `resolveRelativeDateFilter(filter)` from `@svgrid/enterprise` turns it into dates when you build the query. Demo 701 shows the operators on a review queue. The grid side is the extension's `filterOperators` seam: a module can add an operator for any column type, with its own test and the filter a server gets in its place. ## Timezones The grid does not adjust dates for the user's timezone. If you store `'2026-05-27'` and the user is in UTC-08, the cell displays as `2026-05-27` (no shift), and a `greaterThan: '2026-05-26'` filter matches. That is usually what people want for **calendar** dates. For timezone- sensitive datetimes, store with `Z` suffix and use the `datetime` editor type. ## Date operators Declare the column a date and the filter menu offers before / after / between instead of the string comparisons. Without `cellDataType` an ISO string is just text, and "after 2020" becomes a substring match. ```svelte ``` ## Filtering a date from code `setFilter` takes the same operators the menu uses, so a "this year" shortcut and the menu end up in one state rather than fighting. ```svelte
(api = next)} /> ``` ## More examples ### Overdue filters, cell labels and a row count Enterprise filter and sort additions on a review queue. Due's filter menu offers Today, Before today, Next 7 days and the rest, with nothing to type; Status is stored as codes and its checklist reads Approved and Failed, as the cells do; the status bar counts rows, "6 of 24 rows" under a filter; and reviews with no due date stay last whichever way Due sorts. > Live demo: Overdue filters, cell labels and a row count - https://svgrid.com/demos/701-enterprise-grid-filters/ ## See also - [Filter conditions](https://svgrid.com/docs/help/filtering/filter-conditions/) - [Date editor](https://svgrid.com/docs/help/editing/provided-editors/#date-editor) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/filtering/date-filter/ . All docs: https://svgrid.com/llms.txt