javascript - Angular Material DatePicker Calendar Shows Behind Angular Modal

Question

I have the following simple code:

                <md-content>
                <md-datepicker ng-model="startDate" md-placeholder="Enter date">
                </md-datepicker>
                </md-content>

It populates fine, but when you click on it, the calendar I can see pops up in the shadow behind angular modal window.

*I'm using this datepicker: https://material.angularjs.org/latest/demo/datepicker

Answer 1

you just need to put this into the html template of the modal:

<style> 
.md-datepicker-calendar-pane{
z-index: 1200}
</style>