角材料日期选择器位置答案

【问题标题】：Angular material datepicker position角材料日期选择器位置
【发布时间】：2019-05-06 06:35:09
【问题描述】：

我想知道是否有机会强制材料日期选择器始终显示在输入下方。我不希望打开日期选择器取决于我在页面上的位置（顶部或底部）。无论如何，我希望日期选择器始终位于输入下方。有什么建议吗？

材料页面示例：

https://stackblitz.com/angular/qxybbyroank?file=app%2Fdatepicker-overview-example.ts

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

【问题讨论】：

那么，您不在乎 Detepicker 在页面末尾被切成两半吗？

标签： angular input datepicker angular-material position

【解决方案1】：

如果您真的不关心 Datepicker 在页面末尾被切片，那么您只需要对 CSS 进行细微更改。

.cdk-overlay-connected-position-bounding-box {
    position: relative !important;
}

看看这个工作示例： https://stackblitz.com/edit/angular-bhkmby

【讨论】：