Angular ui-date inside of modal

Question

I am using ui-date (https://github.com/angular-ui/ui-date) (which is an angular directive that extends the jquery ui date picker) to create a pop-up date picker when an input is clicked on. The issue, is that it is inside of a $modal window (from angular-ui). When you click on the input box, the div for the date picker is appended to the bottom, just above the closing tag, which is OUTSIDE of the div that contains the $modal. Therefor, when the $modal window is closed (and thus removed from the DOM) the div for the date-picker remains.

I could not find any documentation on either jquery or ui-date that would allow the div to be appended to another element, it seems to be built in.

I am unsure of how this could be solved.

Code during date picking

<body>

<div class="modal"> <!-- This is the modal div which will be created and destroyed -->
<input type="text" class="input-calendar" id="reason_date" name="reason_date" ng-model="effectiveDate" ui-date="DateOptions" date-input-format date-validation required="required" autocomplete="off" />
</div>

<!-- This is where the date-picker div is appended -->
<div class="date-picker"> 
</div>

</body>

After the modal has been closed

<body>

<!-- Modal div has been destroyed upon close -->

<!-- Date picker div was outside of modal div, so it remains -->
<div class="date-picker"> 
</div>

</body>

Hopefully this explains the issue.

Can you post your code? It sounds like what you're doing should work. — dwbartz, Aug 30 '16 at 20:40
@mls3590712 You should use the bootstrap-ui datepicker which is written in Angular instead of the jQuery one. Otherwise you'll be writing a custom directive around the jQuery date picker. — dwbartz, Aug 30 '16 at 20:50
@mls3590712 If you can use html5 then changing your input type to date will render you a date picker as well. — dwbartz, Aug 30 '16 at 20:52
@dwbartz That's true, and something I personally would choose to do, but that decision is out of my hands for this project. — mls3590712, Aug 30 '16 at 21:14
@mls3590712 So what does the rest of your code your code look like? Any chance you can put it in a plunk? — dwbartz, Aug 30 '16 at 21:20
It's appending the date picker to the end of the `body` so that it appears over any other element on the page. If you were to open another date picker, it would reuse that date picker. It should be set to `display:none` when not in use, so it shouldn't affect anything... — Heretic Monkey, Aug 30 '16 at 21:21
@MikeMcCaughan Except the date picker's hide/show functionality is attached to a variable that is in the $modal's controller. So when that $modal is destroyed (and its attached controller removed) that variable doesn't exist, and thus makes the date picker actually appear. — mls3590712, Aug 31 '16 at 14:24
@MikeMcCaughan because that isn't important. The important part is that I do not want the HTML there at all after the modal is gone. display:none is not good enough for my case, I need the actual HTML gone. — mls3590712, Aug 31 '16 at 17:18

score 1 · Answer 1 · answered Aug 30 '16 at 20:56

1

Why dont you use angular ui bootstrap datepicker, which doesnt depend on jquery at all, here is the link: https://angular-ui.github.io/bootstrap/#/datepicker

I think it will suits you better, hope it helps. :)

answered Aug 30 '16 at 20:56

Gustavo Gabriel

1,378
2
17
28

Believe me I would love to, sadly, this is for an application that I do not fully control the requirements for. – mls3590712 Aug 30 '16 at 21:16
Im not an expert in jquery, but any chance of doing something like this: $( ".date-picker" ).remove(); – Gustavo Gabriel Aug 31 '16 at 14:14

score 0 · Accepted Answer · answered Aug 31 '16 at 18:05

0

You can hook into the $modal's $destroy event and simply remove the element. So inside the controller for the modal, assuming you've injected $scope:

$scope.$on('$destroy', function () {
  $('.date-picker').remove();
});

Hat-tip to @Gustavo for mentioning remove() in a comment to his answer.

Otherwise, submit a PR to the GitHub for the ui-date project. Modify the following code at line 172:

        $element.on('$destroy', function() {
          $element.datepicker('hide');
          $element.datepicker('destroy');
        });

to add $element.remove(); in the $destroy handler...

answered Aug 31 '16 at 18:05

Heretic Monkey

11,687
7
53
122

The second part of this answer will not work, $element will never be "destroyed" in this scenario, only hidden. The first part of the answer, falls into the category of "not really the angular way" since its modifying the dom from inside of controller code. However since I can't think of any other solution (besides modifying the vendor code for jquery's datepicker to allow for where its element is appended to) I will agree that this does in fact answer the original question – mls3590712 Aug 31 '16 at 18:34

Angular ui-date inside of modal

2 Answers2