Angular Material Md-Datepicker Inside Bootstrap Modal

angular material md-datepicker inside bootstrap modal

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.

Angular Material DatePicker Calendar Shows Behind Angular Modal

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); }

How to set focus to material date picker inside a bootstrap modal?

I have found that using the following setup yields good keyboard results and forces the user to select a date value by only using the datepicker.

<mat-form-field
  (click)="picker?.open()"
  style="cursor: pointer"
>
  <input
    matInput
    [ngModel]="dateField.value | date: 'yyyy/MM/dd'"
    [min]="fromMinDate"
    [max]="curDate"
    placeholder="YYYY/MM/DD"
    name="dateFieldView"
    style="cursor: pointer"
    (focus)="picker?.open()"
    readonly
  />
  <input
    matInput
    [matDatepicker]="picker"
    [ngModel]="effectiveDateFrom"
    name="dateField"
    #dateField
    required
    hidden
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="picker"
  ></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Stackblitz

Mat-datepicker-toggle showing behind modal

The issue is that bootstrap-modal sets z-index:1050

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

The material date picker sets z-index: 1000 when the ckd-overlay-pane is created

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%;
}

Adding this to your component style sheet should do the trick... but this will apply to all date-pickers in your entire project.

• You will need to include a custom class identifier to make this specific
  to your modal date-picker if you only want to change that one.

  ::ng-deep .cdk-overlay-container mat-datepicker-content{
    z-index:2000;
  }
  

---

Please reference the answer on this SO question for why using ::ng-deep is ok until further notice.

What to use in place of ::ng-deep

---

Related Topics