5

I'm using ui.bootstrap.datepickerPopup in a filter header template inside ui.grid. This lets me filter rows by date. I also have a button inside the grid menu that toggles grid.options.enableFiltering.

Due to alignment issues with ui-grid, I have datepicker-append-to-body set to true for my datepickers. The first time I enable filtering, everything works fine. However, when I disable filtering and re-enable it, I get duplicate datepickers.

This is what the problem looks like:

I think the problem is that each time the filters are enabled, the following div is appended to the DOM and never removed when the filters are disabled.

<div uib-datepicker-popup-wrap=""
     ng-model="date"
     ng-change="dateSelection(date)"
     template-url="uib/template/datepickerPopup/popup.html"
     class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-date-disabled"
>
    <!-- ngIf: isOpen -->
</div>

Here's a simplified plunker: http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
I get the same issue if I only use one datepicker inside the Time Range filter header.

Any ideas are greatly appreciated! Don't want to use jQuery.

Borja Canseco
  • 325
  • 1
  • 6
  • 24
  • This is wiered. When you toggle filter options, It keep on adding 2 datepicker in body each time.. I did toggle filter option of grid 4 times and I saw 8 uib-datepicker in DOM got added. Also other interesting question is, Why It shows only 2 datepicker a when you open filter :D – Pankaj Parkar Sep 07 '17 at 17:46

1 Answers1

2

I don't have an answer on why this is happening but a solution without jQuery would be to remove the pop-up when triggering the filter toggle using document.querySelectorAll()

var elements = document.querySelectorAll("div[uib-datepicker-popup-wrap]");
Array.prototype.forEach.call(elements, function(node) {
     node.parentNode.removeChild(node);
});

Plunker here

Marcus Höglund
  • 16,172
  • 11
  • 47
  • 69
  • 1
    Your solution is a fine workaround, thank you! For anyone reading this in the future, you can throw this in the `$onInit` of a directive on a `span` wrapping the `.ui-grid-filter-container` to make it a bit cleaner. – Borja Canseco Sep 08 '17 at 17:25