Search code examples
ag-gridag-grid-angular

Ag-grid does not support Date Time Filter


I want to implement a date-time filter on ag-grid column. But ag-grid does not support the date-time filter.
My date-time format is DD/MM/YY HH:MM:SS
Is there any way I can modify the 'agDateColumnFilter' to support DateTime or I have to write a custom date-time filter


Solution

  • There is a way to modify the agDateColumnFilter using 3rd party components. You can see two examples in the documentation and a blog post.

    A few things to note:

    1. You'll still have to declare a custom framework component to replace the default filter. That component will render the 3rd party component.

    2. You need to append the component to document.body. Otherwise, it will be contained in the filter <div> and it'll look funny.

      enter image description here

    3. You'll also have to set "ag-custom-component-popup" as one of it's classes, so that clicking on the date picker does not close the filter window.