Search code examples
angularag-gridag-grid-angular

How to connect Angular Material Datepicker to AgGrid's Cell Editor for date-type fields?


I have an Angular9 application that uses AgGrid tables. There are several tables that contains date columns -- 'pickup_date', 'return_date', etc. I want to make user use a datepicker to select dates when editing cells in those columns. AgGrid's documentation have an example of using jQuery's datepicker for that purpose -- https://www.ag-grid.com/javascript-grid-cell-editing/#example-datepicker-cell-editing . But I want to avoid using jQuery in my app. Is there any way to connect any other datepicker, let's say Angular Material Datepicker, to Cell Editor?

Thanks for any help.


Solution

  • You'll need to use a cellRenderer (see here) to implement this. You can then place your Angular Material date picker inside the cell to display when being edited.

    I've created a StackBlitz example for your here.