JavaScript Data GridDate Filter

javascript logo

Date Filters allow you to filter date data.

Configure as follows:

const gridOptions = {
    columnDefs: [
        {
            field: 'date',
            // configure column to use the Date Filter
            filter: 'agDateColumnFilter',
            filterParams: {
                // pass in additional parameters to the Date Filter
            },
        },
    ],

    // other grid options ...
}

The example below shows the Date Filter in action:

  • The Date column is using a Date Filter.
  • A Date Filter Comparator is provided to parse the data and allow date comparisons to be made.
  • The minimum valid year is set to 2000, and maximum valid year is 2021. Dates outside this range will be considered invalid, and will:
    • Deactivate the column filter. This avoids the filter getting applied as the user is typing a year - for example suppose the user is typing the year 2008, the filter doesn't execute for values 2, 20 or 200 (as the text 2008 is partially typed).
    • Be highlighted with a red border (default theme) or other theme-appropriate highlight.
  • the inRangeFloatingFilterDateFormat property has been set to define a custom date format, this is only shown in the floating filter panel when an in-range filter has been applied.

Configuration

Date Filters are configured though the filterParams attribute of the column definition (IDateFilterParams interface):