mat-date-range-picker被模态框遮挡，选择窗口显示异常求助

问题场景 #

在Bootstrap模态框中使用Angular Material的mat-date-range-picker组件时，点击日期选择器后，弹出的选择窗口会显示在模态框下方，被模态框内容遮挡，无法正常选择日期。

相关代码 #

<button type="button" class="btn btn-primary " data-bs-toggle="modal"  data-bs-target="#addEmployeeModal">
    + Add New
</button>

<!-- 模态框代码 -->
<div class="modal modal-xl center" id="updateEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="employeeEditModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h1 style="font-weight: bold" class="modal-bs-title" id="updateEmployeeModalLabel">Edit Tasks</h1>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 其他表单内容 -->
                <div class="form-group" >
                    <mat-form-field class="custom-form-field">
                        <mat-date-range-input [rangePicker]="datepicker" > 
                            <input matStartDate placeholder="Start date" > 
                            <input matEndDate placeholder="End date" > 
                        </mat-date-range-input> 
                        <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle> 
                        <mat-date-range-picker  #datepicker></mat-date-range-picker>
                    </mat-form-field> 
                </div>
            </div>
        </div>
    </div>
</div>

解决方法 #

方法1：调整层级z-index #

Bootstrap模态框默认z-index为1050，Angular Material日期选择器的默认层级低于该值，导致被遮挡。通过CSS强制提高日期选择器的层级：

/* 针对日期范围选择器弹窗 */
.mat-date-range-picker-content {
    z-index: 1060 !important;
}

/* 若上述无效，可尝试覆盖所有日期选择器弹窗 */
.mat-datepicker-content {
    z-index: 1060 !important;
}

方法2：自定义面板类 #

在mat-date-range-picker上添加自定义面板类，通过类来调整层级：

1. 模板中添加panelClass属性：

<mat-date-range-picker #datepicker panelClass="datepicker-over-modal"></mat-date-range-picker>

2. 在全局样式文件（如styles.css）中添加样式：

.datepicker-over-modal {
    z-index: 1060 !important;
}

方法3：修改模态框溢出属性（谨慎使用） #

如果模态框的modal-body设置了overflow: auto，会裁剪内部弹窗，可尝试调整：

.modal-body {
    overflow: visible !important;
}

注意：该方法会影响模态框的滚动行为，仅在无其他解决方案时使用。

方法4：调整弹窗挂载容器 #

Angular Material弹窗默认挂载在body下，可通过OverlayContainer将其挂载到模态框内部，避免层级冲突：

import { OverlayContainer } from '@angular/cdk/overlay';
import { OnInit, OnDestroy } from '@angular/core';

export class YourComponent implements OnInit, OnDestroy {
    constructor(private overlayContainer: OverlayContainer) {}

    ngOnInit(): void {
        const modalElement = document.getElementById('updateEmployeeModal');
        if (modalElement) {
            // 将弹窗容器移动到模态框内
            modalElement.appendChild(this.overlayContainer.getContainerElement());
        }
    }

    ngOnDestroy(): void {
        // 组件销毁时将容器移回原位置，避免影响其他组件
        document.body.appendChild(this.overlayContainer.getContainerElement());
    }
}

内容的提问来源于stack exchange，提问作者משה כהן