Expand All

  Getting Started



  Row Models





Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Date Component

You can create your own date components, and ag-Grid will use them every time it needs to ask user for a date value. The date components so far are used in ag-Grid in:

  1. On the rich date filter
  2. On the floating date filter

By default the grid will use the browser provided date picker for Chrome (as we think it's nice), but for all other browser it will just provide a simple text field. You can provide your chosen date picker to ag-Grid. This is done by providing a custom Date Component via the grid property dateComponent as follows:

gridOptions: { ... // Here is where we specify the component to be used as the date picket widget dateComponent: MyDateEditor }},

The interface for dateComponent is like this:

interface IDateComp { // mandatory methods // The ini t(params) method is called on the filter once. See below for details on the parameters. init(params: IFilterParams): void; // Returns the GUI for this fi lter. The GUI can be a) a string of html or b) a DOM element or node. getGui(): any; /** Returns the current date represented by this editor */ getDate(): Date; /** Sets the date represented by this component */ setDate(date:Date): void; // optional methods <span class="codeComment">// Gets called when the component is destroyed. If your custom component ne eds to do // any resource cleaning up, do it here.</span> destroy?(): void; }


The method init(params) takes a params object with the items listed below. If the user provides params via the gridOptions.dateComponentParams attribute, these will be additionally added to the params object, overriding item s of the same name if a name clash exists.

interface IDateParams { /** Callback method to call when the date has changed. */ onDateChanged:()=>void }

Custom Date Example

The example below shows how to register a cus tom date component, and then how that component is automatically used in the date column for both the rich filter and the floating filter.