JavaScript Data GridDate Component
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.
Simple Date Component
Below is an example of date class:
class CustomDateComponent {
init(params) {
const template = `
<input type="text" data-input style="width: 100%;" />
<a class="input-button" title="clear" data-clear>
<i class="fa fa-times"></i>
</a>`;
this.params = params;
this.eGui = document.createElement('div');
this.eGui.setAttribute('role', 'presentation');
this.eGui.classList.add('ag-input-wrapper');
this.eGui.classList.add('custom-date-filter');
this.eGui.innerHTML = template;
this.eInput = this.eGui.querySelector('input');
this.picker = flatpickr(this.eGui, {
onChange: this.onDateChanged.bind(this),
dateFormat: 'd/m/Y',
wrap: true
});
this.picker.calendarContainer.classList.add('ag-custom-component-popup');
this.date = null;
}
getGui() {
return this.eGui;
}
onDateChanged(selectedDates) {
this.date = selectedDates[0] || null;
this.params.onDateChanged();
}
getDate() {
return this.date;
}
setDate(date) {
this.picker.setDate(date);
this.date = date;
}
setInputPlaceholder(placeholder) {
this.eInput.setAttribute('placeholder', placeholder);
}
}
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:
const gridOptions = {
// Here is where we specify the component to be used as the date picker widget
components: {
agDateInput: CustomDateComponent
}
};
Please see Provided Components for more information about overriding AG Grid provided components (as we're doing here
by overriding agDateInput
).
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.
Custom Date Interface
The interface for a custom date component is as follows:
interface IDateComp {
// Returns the current date represented by this component
getDate(): Date | null;
// Return the DOM element of your component, this is what the grid puts into the DOM
getGui(): HTMLElement;
// Sets the date represented by this component
setDate(date: Date | null): void;
// When used in a floating filter, a hook to perform any necessary operations when the column definition is updated.
onParamsUpdated?(params: IDateParams): void;
// Gets called once by grid when the component is being removed; if your component needs to do any cleanup, do it here
destroy?(): void;
// The init(params) method is called on the component once.
init?(params: IDateParams): AgPromise<void> | 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;
}
Custom Date Parameters
The init(params)
method takes a params object with the items listed below:
Properties available on the IDateParams<TData = any, TContext = any>
interface.
on | Method for component to tell AG Grid that the date has changed. |
filter | DateFilterParams |
apiTypeGridApi | The grid api. |
column | The column api. |
contextTypeTContext | Application context as set on gridOptions.context . |