angular material md-datepicker inside bootstrap modal

Question

I am tring to use Angular material md-datepicker inside a Bootstrap modal but, on clicking the date the modal popup hides. How can i solve that 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>

How it is...

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

how do you get the datepicker to render in first place? Tried lots of things just not showing the picker box. — user2617470, Sep 30 '20 at 05:21

score 18 · Answer 1 · answered Nov 13 '17 at 22:35

The accepted answer doesn't work for @angular/material 5.0.0-rc0 .

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

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

::ng-deep (or /deep/) prefix needs to be used because of the view encapsulation. Note that deep is marked as deprecated in the documentation and using cdk-overlay-container is probably not a good practice since future material module changes might break it.

::ng-deep is deprecated – nicolascolman Apr 11 '19 at 12:39 — nicolascolman, Apr 11 '19 at 12:39

score 7 · Accepted Answer · edited May 23 '17 at 12:10

7

I had the same problem, and 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>

The other upvoted answer to the same question says that you can also modify the angular-material.css file and change the z-index there, but I don't recommend modifying the source files because your change may be reverted if you decide to update the library.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 28 '17 at 06:57

Charlie

624
1
8
22

This doesn't work for material 8.1.2. The answer with ng-deep works, even with Angular 8. – knt5784 Aug 05 '19 at 15:33

score 3 · Answer 3 · answered Apr 15 '18 at 13:09

3

The working solution for me with @angular/material 5.2.4 is to add my css file following part.

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

answered Apr 15 '18 at 13:09

Ali Altun

397
5
14

score 2 · Answer 4 · edited May 28 '21 at 12:55

2

The working solution for me with "@angular/material": "^11.2.13" is to add my global css file below.

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

edited May 28 '21 at 12:55

Sergiy T.

1,433
1
23
25

answered May 28 '21 at 05:37

Marcos Oliveira

21
1

angular material md-datepicker inside bootstrap modal

4 Answers4

Linked