迁移至MDC版Angular Material后ngxDaterangepickerMd不可见

问题复现 #

迁移至Angular Material 15的MDC组件后，ngx-daterangepicker-material出现以下异常：

• mat-form-field不设置外观或使用appearance="fill"时，日期选择器完全不显示
• 使用appearance="outline"时，日期选择器被其他元素遮挡

解决方案 #

1. 升级ngx-daterangepicker-material至兼容版本 #

Angular 15需要对应版本的ngx-daterangepicker-material，执行以下命令升级：

npm install ngx-daterangepicker-material@^6.0.0 --save

2. 修复样式冲突 #

添加以下CSS规则，解决指示器显示和弹出层遮挡问题：

/* 确保日历选择指示器可见 */
.mat-mdc-form-field .mdc-text-field__input::-webkit-calendar-picker-indicator {
  display: block !important;
  opacity: 1;
  cursor: pointer;
}

/* 提升日期选择器弹出层层级，避免被遮挡 */
.ngx-daterangepicker-container {
  z-index: 10000 !important;
}

/* 确保输入框元素不被透明化 */
.mat-mdc-input-element {
  opacity: 1 !important;
}

3. 调整mat-form-field配置 #

• 移除空的mat-label，或添加floatLabel="never"避免布局占位问题
• 修改后的示例代码：

<mat-form-field appearance="outline" floatLabel="never">
  <input matInput placeholder="Date" ngxDaterangepickerMd [(ngModel)]="initialDates"
         [locale]="locale" [ranges]="ranges" [minDate]="minDate" [alwaysShowCalendars]="true" [autoApply]="true"
         [showDropdowns]="true" [showWeekNumbers]="true" opens="center" [linkedCalendars]="false" readonly="true"
         (rangeClicked)="rangeClicked($event)" (startDateChanged)="setStart($event)"
         (endDateChanged)="setEnd($event)" (datesUpdated)="onClose()"/>
</mat-form-field>

4. 验证模块导入 #

确保模块中仅导入MDC版的Angular Material组件，且正确引入NgxDaterangepickerMdModule：

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NgxDaterangepickerMdModule } from 'ngx-daterangepicker-material';

@NgModule({
  imports: [
    MatFormFieldModule,
    MatInputModule,
    NgxDaterangepickerMdModule.forRoot()
  ]
})
export class YourModule { }

内容的提问来源于stack exchange，提问作者Ihescode