Angular material md-datepicker inside bootstrap modal

Question

I'm trying to use the Angular md-datepicker inside the Bootstrap mod, but when I click on the date that the modal popup hides. How can I solve this problem?

 <div class="modal fade " tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Introduction video for body composition ...</h4> </div> <div class="modal-body"> <md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker> </div> </div> </div> </div> 

 <div class="modal fade " tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Introduction video for body composition ...</h4> </div> <div class="modal-body"> <md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker> </div> </div> </div> </div> 

Like this...

After disabling display: block in the modal class ...

Answer 1

I had the same problem, and I found that this solution to a similar question actually solved the problem. You just need to add the following style to the HTML code of your modal window:

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

another confirmed answer to the same question says that you can also modify the angular-material.css file and change the z-index there, but I do not recommend changing the source files because your change may be undone if you decide to update the library.

Answer 2

The accepted answer does not work for @angular/material 5.0.0-rc0 .

Instead, add the file <your_component>.component.scss :

 ::ng-deep .cdk-overlay-container{ z-index: 1200 !important; } 

:: ng-deep (or / deep / ) should use a prefix due to the encapsulation of the view. Please note that the deep one is marked as deprecated in the documentation, and using cdk-overlay-container is probably not a good practice, since changes in future modules may break it.

Answer 3

The working solution for me with @ angular / stuff 5.2.4 is to add my css file after the next part.

 .cdk-overlay-container {   z-index: 1200; } >