时间戳

首页 > 解决方案 > 打开日历时出现Angular Material Datepicker设计问题

javascript - 打开日历时出现Angular Material Datepicker设计问题

问题描述

我在使用 Angular Material Datepicker 时遇到问题，我似乎无法找到它的根本问题。我想不出办法来表达这个问题。每当我打开日历并选择日期时，叠加层太大并且超出了框的边界。希望这个附加的图像可以帮助：

日期选择器日历问题

我在组件所在的模块中有以下导入：

import { MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule, MatOptionModule } from '@angular/material';
import { MomentDateModule } from '@angular/material-moment-adapter';

<mat-form-field>
 <mat-label>Choose a date</mat-label>
 <input matInput [matDatepicker]="picker">
 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
 <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Datepicker 不在任何会改变其样式的 div 元素中。现在，我只选择年份和月份。将来，也有选择日期的计划，那就是问题出现的时候。

标签： javascriptangulartypescriptdatepickerangular-material2

解决方案

我认为你有你css的table班级习惯

table-layout: fixed;
width: 150%;

Angular 日期选择器也在内部使用表结构。所以它覆盖css了角度材料类的。

因此，在您的自定义表中，使用classcss排除该类。'mat-calendar-table':not

检查以下styles.css文件以供参考检查这里

推荐阅读