Vue Data Grid

Date Filter

vue logo

Date Filters allow you to filter date data.

Configure as follows:

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

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

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):