Angular Grid: Date 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.
By default the grid will use the browser provided date picker for Chrome and Firefox (as we think it's nice), but for all other browsers it will just provide a simple text field. You can use your own date picker to AG Grid 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 picker widget
dateComponent: MyDateEditor
},
The interface for dateComponent
is this:
interface IDateComp {
// Mandatory methods
// The init(params) method is called on the component once. See below for details on the parameters.
init(params: IDateParams): void;
// Returns the DOM element for this component
getGui(): HTMLElement;
// Returns the current date represented by this editor
getDate(): Date;
// Sets the date represented by this component
setDate(date: Date): void;
// Optional methods
// Sets the input text placeholder
setInputPlaceholder(placeholder: string): void;
// Sets the input text aria label
setInputAriaLabel(label: string): void;
// 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;
}
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.