Using react-datepicker with agGrid

Question

Im trying to incorporate react-date picker with ag-grid ag-grid provides documentation on using custom date picker but with using flatpickr was wondering if anyone has successfully attempted to use react-datepicker with ag-grid and if so, could provide and example?

Ag Grid example: https://www.ag-grid.com/javascript-grid/component-date/

score 4 · Accepted Answer · answered Mar 18 '21 at 13:14

The react-datepicker is a bit more tricky to work with but I have a solution that works:

The portalId is key here, it allows us to append the popup to the root which allows the popup to be visible inside the filter menu:

<DatePicker
          portalId="root"
          popperClassName="ag-custom-component-popup"
          selected={this.state.date}
          onChange={this.onChange.bind(this)}
        />

Please see this example

Using react-datepicker with agGrid

1 Answers1