React Data GridDate Component
react logo

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).

Implementing a Date Component

To configure custom dates, first enable the grid option reactiveCustomComponents.

Custom date components are controlled components, which receive a date value as part of the props, and pass date value updates back to the grid via the onDateChange callback. Note that the date is applied immediately when onDateChange is called.

export default ({ date, onDateChange }) => {
    ...
    return (
        <input
            type="date"
            value={convertToString(date)}
            onChange={({ target: { value } }) => onDateChange(convertToDate(value))}
        />
    );
}

Enabling reactiveCustomComponents affects all custom components. If you have custom components built in an imperative way instead of setting the reactiveCustomComponents option, they may need to be rebuilt to take advantage of the new features that reactiveCustomComponents offers. Using custom components built in an imperative way is now deprecated, and in AG Grid v32 the reactiveCustomComponents option will be true by default. See Migrating to Use reactiveCustomComponents. For the legacy imperative documentation, see Imperative Date Component.

Custom Date Parameters

Date Props

The following props are passed to the custom date components (CustomDateProps interface).

Date Callbacks

The following callbacks can be passed to the useGridDate hook (CustomDateCallbacks interface). All the callbacks are optional, and the hook only needs to be used if callbacks are provided.