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';
import {IDateAngularComp} from 'ag-grid-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.

Example: Custom Date Component

Custom Date Interface

The interface for a custom date component is as follows:

Custom Date Parameters

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