React Data Grid

Date Component - Imperative

react logo

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: