Angular Material DatePicker Calendar Shows Behind Angular Modal

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

For Bootstrap 4 and Angular 9 material working fine.

The accepted answer is outdated. For @angular/material 5.0.0-rc0 have used with success:

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

https://stackoverflow.com/a/47274694/1225421

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

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

I ended up going into angular-material.css and changed the Z-index to 1151.

 .md-datepicker-calendar-pane {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1151;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .md-datepicker-calendar-pane.md-pane-open {
    -webkit-transform: scale(1);
            transform: scale(1); }