Menu
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.
912
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. :)
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
