Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

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 init(params) method is called on the filter once. See below for details on the parameters.
    init(params: IFilterParams): void;

    // Returns the GUI for this filter. 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

    // 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 items 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, and then how that component is automatically used in the date column for both the rich filter and the floating filter.