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 rich date filter and 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 Method] - sets the input text placeholder */ setInputPlaceholder(placeholder: string): void; // optional methods // Gets called when the component is destroyed. If your custom component needs to do // any resource cleaning up, do it here. destroy?(): void; }

IDateParams

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 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 how third party components and therefore no way to implement a preventDefault when the user clicks on the Calendar Picker (for more info see: Custom Filters Containing a Floating Element). Our way of fixing this problem is to add the ag-custom-component-popup class to the floating calendar.