React 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.
Below is a simple example of filter component as a Hook:
export default forwardRef((props, ref) => {
const [date, setDate] = useState(null);
const [picker, setPicker] = useState(null);
const refFlatPickr = useRef();
const refInput = useRef();
// we use a ref as well as state, as state is async,
// and after the grid calls setDate() (eg when setting filter model)
// it then can call getDate() immediately (eg to execute the filter)
// and we need to pass back the most recent value, not the old 'current state'.
const dateRef = useRef();
//*********************************************************************************
// LINKING THE UI, THE STATE AND AG-GRID
//*********************************************************************************
const onDateChanged = (selectedDates) => {
const newDate = selectedDates[0];
setDate(newDate);
dateRef.current = newDate;
props.onDateChanged();
};
useEffect(() => {
setPicker(flatpickr(refFlatPickr.current, {
onChange: onDateChanged,
dateFormat: 'd/m/Y',
wrap: true
}));
}, []);
useEffect(() => {
if (picker) {
picker.calendarContainer.classList.add('ag-custom-component-popup');
}
}, [picker]);
useEffect(() => {
//Callback after the state is set. This is where we tell ag-grid that the date has changed so
//it will proceed with the filtering and we can then expect AG Grid to call us back to getDate
if (picker) {
picker.setDate(date);
}
}, [date, picker]);
useImperativeHandle(ref, () => ({
//*********************************************************************************
// METHODS REQUIRED BY AG-GRID
//*********************************************************************************
getDate() {
//ag-grid will call us here when in need to check what the current date value is hold by this
//component.
return dateRef.current;
},
setDate(date) {
//ag-grid will call us here when it needs this component to update the date that it holds.
dateRef.current = date;
setDate(date);
},
//*********************************************************************************
// AG-GRID OPTIONAL METHODS
//*********************************************************************************
setInputPlaceholder(placeholder) {
if (refInput.current) {
refInput.current.setAttribute('placeholder', placeholder);
}
},
setInputAriaLabel(label) {
if (refInput.current) {
refInput.current.setAttribute('aria-label', label);
}
}
}));
// inlining styles to make simpler the component
return (
<div className="ag-input-wrapper custom-date-filter" role="presentation" ref={refFlatPickr}>
<input type="text" ref={refInput} data-input style={{ width: "100%" }} />
<a class='input-button' title='clear' data-clear>
<i class='fa fa-times'></i>
</a>
</div>
);
});Note that the grid calls getDate and setDate synchronously. As state is asynchronous, you will also need to use a ref if using state to store the current date value. This is demonstrated in the example above.
Here is the same example as a Class-based Component:
export default class CustomDateComponent extends Component {
constructor(props) {
super(props);
this.state = {
date: null
};
}
render() {
//Inlining styles to make simpler the component
return (
<div className="ag-input-wrapper custom-date-filter" role="presentation" ref="flatpickr">
<input type="text" ref="eInput" data-input style={{width: "100%"}}/>
<a class='input-button' title='clear' data-clear>
<i class='fa fa-times'></i>
</a>
</div>
);
}
componentDidMount() {
this.picker = flatpickr(this.refs.flatpickr, {
onChange: this.onDateChanged.bind(this),
dateFormat: 'd/m/Y',
wrap: true
});
this.eInput = this.refs.eInput;
this.picker.calendarContainer.classList.add('ag-custom-component-popup');
}
//*********************************************************************************
// METHODS REQUIRED BY AG-GRID
//*********************************************************************************
getDate() {
//ag-grid will call us here when in need to check what the current date value is hold by this
//component.
return this.state.date;
}
setDate(date) {
//ag-grid will call us here when it needs this component to update the date that it holds.
this.setState({date});
this.picker.setDate(date);
}
//*********************************************************************************
// AG-GRID OPTIONAL METHODS
//*********************************************************************************
setInputPlaceholder(placeholder) {
this.eInput.setAttribute('placeholder', placeholder);
}
setInputAriaLabel(label) {
this.eInput.setAttribute('aria-label', label);
}
//*********************************************************************************
// LINKS THE INTERNAL STATE AND AG-GRID
//*********************************************************************************
updateAndNotifyAgGrid(date) {
//Callback after the state is set. This is where we tell ag-grid that the date has changed so
//it will proceed with the filtering and we can then expect AG Grid to call us back to getDate
this.setState({date}, this.props.onDateChanged);
}
//*********************************************************************************
// LINKING THE UI, THE STATE AND AG-GRID
//*********************************************************************************
onDateChanged = (selectedDates) => {
this.setState({date: selectedDates[0]});
this.updateAndNotifyAgGrid(selectedDates[0]);
};
}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:
<AgGridReact
components={{ agDateInput: CustomDateComponent }}
...other properties...
/>Please see Provided Components for more information about overriding AG Grid provided components (as we're doing here
by overriding agDateInput).
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.
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[];
}Note that if you're using Hooks for Grid Components that have lifecycle/callbacks that the
grid will call (for example, the getDate callback from an Date Component), then you'll need to expose them with
forwardRef & useImperativeHandle.
Please refer to the Hook documentation (or the examples on this page) for more information.
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.
Properties available on the IDateParams<TData = any, TContext = any> interface.
| Method for component to tell AG Grid that the date has changed. | |
| DateFilterParams | |
| The grid api. | |
| The column api. | |
| Application context as set on gridOptions.context. |