This page describes the old imperative way of declaring custom date components when the grid option reactiveCustomComponents
is not set. This behaviour is deprecated, and you should instead use the new behaviour described on the Custom Date page.
An example date component looks like this:
export default forwardRef((props, ref) => {
const dateRef = useRef(null);
const [date, setDate] = useState(null);
// expose AG Grid Date Lifecycle callbacks
useImperativeHandle(ref, () => {
return {
getDate(params) {
return dateRef.current;
},
setDate() {
dateRef.current = date;
setDate(date);
},
}
});
const onDateChange = (newDate) => {
setDate(newDate);
dateRef.current = newDate;
props.onDateChanged();
}
return (
<input
type="date"
value={convertToString(date)}
onChange={({ target: { value } }) => onDateChange(convertToDate(value))}
/>
);
});
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 IDate {
// Returns the current date represented by this component
getDate(): Date | null;
// 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.
refresh?(params: IDateParams): 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;
}
Note that you will need to expose the lifecycle/callback methods (for example, the getDate
callback) with forwardRef
and useImperativeHandle
.
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.