React Data GridDate Component

ReactAngularVueJavascript

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.

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.

Registering Date Components

By default the grid will use the browser-provided date picker for all Supported Browsers, but for 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:

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

Custom Date Interface

The interface for a custom date component is as follows:

interface IDateReactComp {
  // 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;

  getReactContainerStyle?: () => {};

  getReactContainerClasses?: () => string[];

}

Custom Date Parameters

When a React component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell & row values available to you via props - the interface for what is provided is documented below.