Search code examples
cssbootstrap-modalangular-material

angular material md-datepicker inside bootstrap modal

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

this is how it's appearing when i clicked on date

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

when i disabled display: block in .modal class its coming like that.

Solution

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