Datetime Filter

Use the Pro datetime filter for timestamps that represent exact instants: created times, audit events, log entries, and scheduled executions. Use the Date Filter instead when the source represents a calendar day without a time.

Source code

grid.plugins = [AdvanceFilterPlugin];
grid.columns = [
  { prop: 'event', name: 'Event' },
  {
    prop: 'executedAt',
    name: 'Executed at',
    filter: [FILTER_DATETIME],
    size: 210,
  },
];
grid.filter = { date: { timezoneMode: 'utc' } };

return [
  { event: 'Queued', executedAt: '2026-08-26T10:30:14Z' },
  { event: 'Approved', executedAt: '2026-08-26T10:30:15Z' },
  { event: 'Dispatched', executedAt: '2026-08-26T10:30:16Z' },
  { event: 'Completed', executedAt: '2026-08-26T14:45:00Z' },
];

Quick start

1
import { AdvanceFilterPlugin, FILTER_DATETIME } from '@revolist/revogrid-pro';
2
import '@revolist/revogrid-pro/dist/revogrid-pro.css';
3

4
grid.plugins = [AdvanceFilterPlugin];
5
grid.columns = [
6
  {
7
    prop: 'createdAt',
8
    name: 'Created',
9
    filter: [FILTER_DATETIME],
10
  },
11
];
12
grid.filter = true;
13
grid.source = [
14
  { createdAt: '2026-08-26T10:30:00Z' },
15
  { createdAt: new Date('2026-08-26T14:45:00Z') },
16
  { createdAt: 1787741100000 },
17
];

Accepted source values are Date, epoch milliseconds, and ISO datetimes with Z or an explicit offset. Date-only and offset-free source strings are invalid for this type.

Datetime operators

Datetime saved IDs prefix the shared temporal operator name with datetime:

Example saved ID	Meaning
`datetimeEquals`	Exact selected second
`datetimeBefore` / `datetimeAfter`	Strict instant comparison
`datetimeOnOrBefore` / `datetimeOnOrAfter`	Inclusive comparison
`datetimeBetween`	Inclusive selected seconds
`datetimeNotEqual`	Not the selected second
`datetimeIsEmpty` / `datetimeIsNotEmpty`	Shared blank policy
`datetimeToday`, `datetimeLast7Days`, `datetimeThisWeek`	Relative calendar periods in the resolved timezone

The popup also provides month, quarter, year, and fiscal-period operators. Read the complete list in the Date Filter operator reference.

Start with a range

1
grid.filter = {
2
  multiFilterItems: {
3
    createdAt: [
4
      {
5
        id: 1,
6
        type: 'datetimeBetween',
7
        value: {
8
          fromDate: '2026-08-26T09:00',
9
          toDate: '2026-08-26T17:00',
10
        },
11
        relation: 'and',
12
      },
13
    ],
14
  },
15
};

The datetime-local values are interpreted in the resolved timezone. Equality selects one second; between includes the final selected second. Internally these become half-open UTC ranges for reliable local and remote evaluation.

Set an explicit timezone

1
grid.filter = {
2
  date: {
3
    timezoneMode: 'organization',
4
    organizationTimeZone: 'America/New_York',
5
    columns: {
6
      createdAt: {
7
        timezoneMode: 'explicit',
8
        timeZone: 'Europe/Lisbon',
9
      },
10
    },
11
  },
12
};

With no date policy, the datetime control uses the browser’s local timezone. Configure an IANA timezone when all users must interpret relative periods and wall-clock input consistently.

Invalid and DST values

Offset-free source strings such as 2026-08-26T10:30:00 are invalid because they do not identify an instant.
A wall-clock value inside a daylight-saving gap does not exist and is rejected.
A repeated wall-clock value is ambiguous and is also rejected.
Invalid nonblank values fail comparisons; they do not become blank automatically.

Common mistakes

Do not use datetime for source values such as 2026-08-26; use date.
Do not restore datetime state with unprefixed date operator IDs.
Do not assume the browser timezone matches the organization’s reporting timezone.
Use ISO strings in persisted or remote state; JavaScript Date objects are not JSON-safe AST input.