Search code examples
javascriptangularjsng-dialog

angular-datepicker doesn't work in ngDialog

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?

Solution

  • 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.