Question: UI Bootstrap datepicker duplicated when appended to body

Question

UI Bootstrap datepicker duplicated when appended to body

Answers 1
Added at 2017-09-07 19:09
Tags
Question

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.

Answers to

UI Bootstrap datepicker duplicated when appended to body

nr: #1 dodano: 2017-09-07 20:09

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

Source Show
◀ Wstecz