Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

Angular Data Grid: Date Component

You can create your own date components, and AG Grid will use them every time it needs to ask the user for a date value. The date components are currently used in date filters.

Simple Date Component

Below is a simple example of filter component class:

import {Component, ElementRef, ViewChild} from '@angular/core';

import {IDateParams} from '@ag-grid-community/core';
import {IDateAngularComp} from '@ag-grid-community/angular';

// we'll be using the globally provided flatpickr for our example
declare var flatpickr : any;

@Component({
   selector: 'app-custom-date',
   template: `
     <div #flatpickrEl class="ag-input-wrapper custom-date-filter" role="presentation">
     <input type="text" #eInput data-input style="width: 100%;"/>
     <a class='input-button' title='clear' data-clear>
       <i class='fa fa-times'></i>
     </a>
     </div>
   `,
   styles: [        `
           .custom-date-filter a {
               position: absolute;
               right: 20px;
               color: rgba(0, 0, 0, 0.54);
               cursor: pointer;
           }

           .custom-date-filter:after {
               position: absolute;
               content: '073';
               display: block;
               font-weight: 400;
               font-family: 'Font Awesome 5 Free';
               right: 5px;
               pointer-events: none;
               color: rgba(0, 0, 0, 0.54);
           }
       `
   ]
})
export class CustomDateComponent implements IDateAngularComp {
   @ViewChild("flatpickrEl", {read: ElementRef}) flatpickrEl: ElementRef;
   @ViewChild("eInput", {read: ElementRef}) eInput: ElementRef;
   private date: Date;
   private params: IDateParams;
   private picker: any;

   agInit(params: IDateParams): void {
       this.params = params;
   }

   ngAfterViewInit(): void {
       this.picker = flatpickr(this.flatpickrEl.nativeElement, {
           onChange: this.onDateChanged.bind(this),
           wrap: true
       });

       this.picker.calendarContainer.classList.add('ag-custom-component-popup');
   }

   ngOnDestroy() {
       console.log(`Destroying DateComponent`);
   }

   onDateChanged(selectedDates: any) {
       this.date = selectedDates[0] || null;
       this.params.onDateChanged();
   }

   getDate(): Date {
       return this.date;
   }

   setDate(date: Date): void {
       this.date = date || null;
       this.picker.setDate(date);
   }

   setInputPlaceholder(placeholder: string): void {
       this.eInput.nativeElement.setAttribute('placeholder', placeholder);
   }

   setInputAriaLabel(label: string): void {
       this.eInput.nativeElement.setAttribute('aria-label', label);
   }
}

Registering Date Components

By default the grid will use the browser provided date picker for Chrome and Firefox (as we think it's nice), but for all other browsers it will just provide a simple text field. You can use your own date picker in AG Grid by providing a custom Date Component as follows:

@Component({
   selector: 'my-app',
   template: `
     <ag-grid-angular
         class="ag-theme-alpine"
         [components]="components"
         ...other properties...  
     ></ag-grid-angular>
   `
})
export class AppComponent {
   public components = {
       agDateInput: CustomDateComponent
   };

Please see Provided Components for more information about overridden AG Grid provided components (as we're doing here by overriding agDateInput).

Example: Custom Date Component

The example below shows how to register a custom date component that contains an extra floating calendar picker rendered from the filter field. The problem with this approach is that we have no control over third party components and therefore no way to implement a preventDefault when the user clicks on the Calendar Picker (for more info see Custom Floating Filter Example). Our way of fixing this problem is to add the ag-custom-component-popup class to the floating calendar.

Custom Date Interface

The interface for a custom date component is as follows:


interface IDateAngularComp {
  // Mandatory - Params for rendering this component. 
  agInit(params: IDateParams): void;

  // Returns the current date represented by this component 
  getDate(): Date | null;

  // Sets the date represented by this component 
  setDate(date: Date | null): void;

  // Optional: Sets the disabled state of this component 
  setDisabled?(disabled: boolean): void;

  // Optional: Sets the current input placeholder 
  setInputPlaceholder?(placeholder: string): void;

  // Optional: Sets the current input aria label 
  setInputAriaLabel?(placeholder: string): void;

  // Optional: A hook to perform any necessary operation just after the GUI for this component has been rendered on the screen.
  // If a parent popup is closed and reopened (e.g. for filters), this method is called each time the component is shown.
  // This is useful for any logic that requires attachment before executing, such as putting focus on a particular DOM element. 
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void;

}

Custom Date Parameters

The agInit(params) method takes a params object with the items listed below:

Properties available on the IDateParams interface.

onDateChanged
Function
Method for component to tell AG Grid that the date has changed.
onDateChanged = () => void;
filterParams
IDateFilterParams
IDateFilterParams
filterParams: IDateFilterParams;

interface IDateFilterParams {
  // Required if the data for the column are not native JS `Date` objects. 
  comparator?: IDateComparatorFunc;
  // This is only used if a date component is not provided.
  // By default the grid will use the browser date picker in Chrome and Firefox and a plain text box for all other browsers
  // (This is because Chrome and Firefox are the only current browsers providing a decent out-of-the-box date picker).
  // If this property is set to `true`, the browser date picker will be used regardless of the browser type.
  // If set to `false`, a plain text box will be used for all browsers. 
  browserDatePicker?: boolean;
  // This is the minimum year that may be entered in a date field for the value to be considered valid. Default: `1000` 
  minValidYear?: number;
  // This is the maximum year that may be entered in a date field for the value to be considered valid. Default is no restriction. 
  maxValidYear?: number;
  // If `true`, the `'inRange'` filter option will include values equal to the start and end of the range. 
  inRangeInclusive?: boolean;
  // If `true`, blank (`null` or `undefined`) values will pass the `'equals'` filter option. 
  includeBlanksInEquals?: boolean;
  // If `true`, blank (`null` or `undefined`) values will pass the `'lessThan'` and `'lessThanOrEqual'` filter options. 
  includeBlanksInLessThan?: boolean;
  // If `true`, blank (`null` or `undefined`) values will pass the `'greaterThan'` and `'greaterThanOrEqual'` filter options. 
  includeBlanksInGreaterThan?: boolean;
  // If `true`, blank (`null` or `undefined`) values will pass the `'inRange'` filter option. 
  includeBlanksInRange?: boolean;
  // Array of filter options to present to the user. 
  filterOptions?: (IFilterOptionDef | ISimpleFilterModelType)[];
  // The default filter option to be selected. 
  defaultOption?: string;
  // By default, the two conditions are combined using `AND`.
  // You can change this default by setting this property.
  // Options: `AND`, `OR` 
  defaultJoinOperator?: JoinOperator;
  // If `true`, the filter will only allow one condition.
  // Default: `false` 
  suppressAndOrCondition?: boolean;
  // By default, only one condition is shown, and a second is made visible once a first condition has been entered.
  // Set this to `true` to always show both conditions.
  // In this case the second condition will be disabled until a first condition has been entered.
  // Default: `false` 
  alwaysShowBothConditions?: boolean;
  // Specifies the buttons to be shown in the filter, in the order they should be displayed in.
  // The options are:
  // 
  //   - `'apply'`: If the Apply button is present, the filter is only applied after the user hits the Apply button.
  //   - `'clear'`: The Clear button will clear the (form) details of the filter without removing any active filters on the column.
  //   - `'reset'`: The Reset button will clear the details of the filter and any active filters on that column.
  //   - `'cancel'`: The Cancel button will discard any changes that have been made to the filter in the UI, restoring the applied model. 
  buttons?: FilterButtonType[];
  // If the Apply button is present, the filter popup will be closed immediately when the Apply
  // or Reset button is clicked if this is set to `true`.
  // 
  // Default: `false` 
  closeOnApply?: boolean;
  // Overrides the default debounce time in milliseconds for the filter. Defaults are:
  // - `TextFilter` and `NumberFilter`: 500ms. (These filters have text field inputs, so a short delay before the input is formatted and the filtering applied is usually appropriate).
  // - `DateFilter` and `SetFilter`: 0ms 
  debounceMs?: number;
  // If set to `true`, disables controls in the filter to mutate its state. Normally this would
  // be used in conjunction with the Filter API.
  // 
  // Default: `false` 
  readOnly?: boolean;
  // The column this filter is for. 
  column: Column;
  // The column definition for the column. 
  colDef: ColDef;
  // The row model, helpful for looking up data values if needed.
  // If the filter needs to know which rows are
  // a) in the table,
  // b) currently visible (i.e. not already filtered),
  // c) which groups,
  // d) what order - all of this can be read from the rowModel. 
  rowModel: IRowModel;
  // A function callback to be called when the filter changes. The
  // grid will then respond by filtering the grid data. The callback
  // takes one optional parameter which, if included, will get merged
  // to the FilterChangedEvent object (useful for passing additional
  // information to anyone listening to this event, however such extra
  // attributes are not used by the grid). 
  filterChangedCallback: (additionalEventAttributes?: any) => void;
  // A function callback, to be optionally called, when the filter UI changes.
  // The grid will respond with emitting a FilterModifiedEvent.
  // Apart from emitting the event, the grid takes no further action. 
  filterModifiedCallback: () => void;
  // A function callback for the filter to get cell values from provided row data. Called with a
  // `ValueGetterParams` to get the value for this filter's column for the provided row data.
  // 
  // The callback takes care of selecting the right column definition and deciding whether to use
  // the column `valueGetter` or raw field etc. 
  valueGetter: ValueGetterFunc;
  // A function callback, call with a node to be told whether the node passes all filters except the current filter.
  // This is useful if you want to only present to the user values that this filter can filter given the status of the other filters.
  // The set filter uses this to remove from the list,
  // items that are no longer available due to the state of other filters (like Excel type filtering). 
  doesRowPassOtherFilter: (rowNode: RowNode) => boolean;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}

interface IDateComparatorFunc {
    (filterLocalDateAtMidnight: Date, cellValue: any) : number
}

interface IFilterOptionDef {
  // A unique key that does not clash with the built-in filter keys. 
  displayKey: string;
  // Display name for the filter. Can be replaced by a locale-specific value using a `localeTextFunc`. 
  displayName: string;
  // Custom filter logic that returns a boolean based on the `filterValues` and `cellValue`. 
  predicate?: (filterValues: any[], cellValue: any) => boolean;
  // Number of inputs to display for this option. Defaults to `1` if unspecified. 
  numberOfInputs?: 0 | 1 | 2;
}

type ISimpleFilterModelType = 
      'empty' 
    | 'equals' 
    | 'notEqual' 
    | 'lessThan' 
    | 'lessThanOrEqual' 
    | 'greaterThan' 
    | 'greaterThanOrEqual' 
    | 'inRange' 
    | 'contains' 
    | 'notContains' 
    | 'startsWith' 
    | 'endsWith' 
    | 'blank' 
    | 'notBlank'


type JoinOperator = 'AND' | 'OR'

type FilterButtonType = 
      'apply' 
    | 'clear' 
    | 'reset' 
    | 'cancel'


interface ValueGetterFunc {
    (params: ValueGetterParams) : any
}

interface ValueGetterParams {
  // A utility method for getting other column values 
  getValue: (field: string) => any;
  // Row node for the given row 
  node: RowNode | null;
  // Data associated with the node 
  data: any;
  // Column for this callback 
  column: Column;
  // ColDef provided for this column 
  colDef: ColDef;
  // The grid api. 
  api: GridApi;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  context: any;
}
api
The grid api.
columnApi
The column api.
context
any
Application context as set on gridOptions.context.