Datepicker in a modal doesn't work

1

I’m trying to add a jQuery UI Datepicker calendar in a modal and it doesn’t seem to work. I am able to successfully get the calendar to display in the main view, but not the modal.

Here is a plunker: http://plnkr.co/edit/KzqtGkTAy7xjGZN6KCSe?p=preview

2

I can think of two issues.

The first is that you are trying to apply the date picker to an ID of “datepicker”. You have 2 such IDs in use. So, only the first will get the date picker.

The second is that that tab content does not exist until after the modal is instantiated. This takes a few cycles. By that time, Angular has already done a digest and looked for all directives in the HTML. It found none for the modal because it did not exist yet.

See this fork : http://plnkr.co/edit/0RdP9bB93J0l6ibK7O3l?p=preview

I used 2 different picker directives and didn’t try to create the second picker until you open the modal.

It needs refinement, but that depends on your final application. I’m assuming you aren’t going to actually have 2 data pickers.

1 Like
3

I see. That makes sense. Yeah, I just need one picker for the modal. The picker on the view was an example of it working.

Got it working. Thanks for the help.

4

Well, it kinda works. After a couple clicks on the list link, the calendar is no longer available in the modal.

From the plunker link below, if you click the List Item Link, then the back arrow, then click the header button to display the calendar modal, the calendar is not there anymore. Sometimes the calendar will appear after one click of the list link, but after two or more clicks on the list link, it seems to disappear from the modal.

5

Honestly, the detail page should not have access to the modal at all. That modal is defined in the ApptsIndexCtrl scope. Once you go to the detail page, you should no longer be in that scope. You should be under the ViewCtrl scope. However, Ionic doesn’t destroy the Modal scope when you navigate. Thats good and bad. Say in a large application, you have a modal. If the user every opened that modal, it is stuck throughout the app and wasting resources.

See : Modals Persist Between States

However, I think the main problem is stemming from our hack at getting the modal to display the calendar. Really, this jQuery stuff should be put in a directive.

See http://jsfiddle.net/FVfSL/
https://github.com/monterail/angular-date-range-picker