Develop a DateEditorComponent that uses Angular Material's <mat-datepicker> to display a date picker for editing a cell that contains a date value. This is a big improvement over using one of the provided cell editors.
Implement the agInit() lifecycle method to set the value of the date picker.
Implement the getValue() lifecycle method to return the date picker value to ag-Grid.
Wire up the date picker in the template, and then using reactive forms in Angular, bind a FormControl to the <input> element. We'll use the control to set the value into the date picker as well as to obtain the value of the date picker when a user selects a date.
Implement the ngAfterViewInit() method to immediate open() the date picker.
After the user has selected a date, we'll use the stopEditing() method available to us in the ICellEditorParams object to immediately stop editing the cell.
Register the custom component using the frameworkComponents input binding on the <ag-grid-angular> component.
Use the newly created dateEditor for the cellEditor property in the column definition.