Angular @角度/物料日期选择器位置

我正在使用@angular/material2模块将日期选择器添加到我的angular 4应用程序中

这是我的HTML

<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>

当我点击datepicker开关时，datepicker弹出窗口会在页面的最末端打开，完全超出了应该打开的表单字段

任何帮助都将不胜感激。

<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>

您需要创建函数单击ex：

<input matInput [matDatepicker]="picker" (click)="picker.open()" placeholder="Choose a date">

---

Ups sory man，您需要添加css样式，位置：相对

---

mat datepicker toggle{position:relative；}或者您的家长，祝您好运

我在Angular 4和Material 2 datepicker上也遇到了同样的问题

不知何故，node_modules/@angular/material/prebuilded themes/indigo pink.css在应用程序中没有链接。我通过在我的根样式表“style.css”中复制此样式表的内容来修复它

---

在项目中添加或链接此样式表：node\u modules/@angular/material/prebuilded themes/indigo pink.css

缺少的部分是导入css文件

angular material.css

，如果在

组件上使用

touchUi=“true”

，它将显示为模式。不确定你的站点是否会主要用于移动设备，但我发现matDatepicker的这种外观更令人满意

以下是标记：

<input matInput [matDatepicker]="picker" placeholder="Birthday" [formControl]="birthday">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi="true" #picker></mat-datepicker> //This line has the touchUi

//这行有touchUi

---

希望这有帮助

我的问题是我将

.mat表单字段下划线设置为隐藏。日期选择器使用此元素确定位置。
弹出窗口由
mat datepicker toggle打开
这不是我的问题，请再次检查我的问题此样式表适用于我：node_modules/@angular/material/prebuild_themes/indigo_pink.css适用于meReally nice解决方案。我的问题是，日期选择器在屏幕顶部被切掉，因此无法完全显示。我认为，您将其显示为覆盖的解决方案也更具吸引力。您为我节省了很多时间来找出问题所在！。简单隐藏{可见性：隐藏；宽度：0；z索引：-1；}
<input matInput [matDatepicker]="picker" placeholder="Birthday" [formControl]="birthday">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi="true" #picker></mat-datepicker> //This line has the touchUi