angular-datepicker doesn't work in ngDialog

Question

I use https://github.com/likeastore/ngDialog and https://github.com/alongubkin/angular-datepicker

And angular-datepicker doesn't work

ngDialog.open(
        { //

            template: '<input type="text" pick-a-date="date" is-open="true" placeholder="Select Date" />{{date}}',

            plain: true,
        })

But angular-datepicker works well when it iwn't in ngDialog

jsfiddle:https://jsfiddle.net/jediserg/jfsuymsv/9/

Updated I change angular-datepicker to jquery datepicker and it doesn't work to. But I fix jquery datepicker by setting timeout on creating

 window.setTimeout(function () {
                self.dp = $( "#lesson-date" ).datepicker({dateFormat: "yy-mm-dd"});        
            }, 100);

But what can I do with angular-datepicker and why all the pickers don't work?

Can you create a fiddle for this? Are there any error logs in the console? — dcodesmith, Mar 23 '15 at 11:38
Just curious, why not use input type="date"? The built in date picker is much better than the angular date picker on mobile devices. — Brian, Mar 23 '15 at 11:41
no errors in console, it just doesn't open popup when i click in input field — Sergey Kolesov, Mar 23 '15 at 12:01
The main target is desktop and type="date" doesn't add nice popup to select date on desktop — Sergey Kolesov, Mar 23 '15 at 12:02

score 2 · Accepted Answer · answered Sep 09 '15 at 08:50

I had the same problem. The thing is, the datepicker is working fine but you can't see it. The ngDialog css-class has a z-index of 10000 and the datepicker let's say only 5000. If you change the z-index to just 1000 the datepicker should show up. At least that solved the problem for my pikaday datepicker.

angular-datepicker doesn't work in ngDialog

1 Answers1