Question

我正在使用@ angular / material2模块将datepicker添加到我的angular 4 app。

这是我的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>

app.module.ts

import {MatDatepickerModule,MatNativeDateModule,MatFormFieldModule,MatInputModule} from '@angular/material';

当我点击日期选择器切换器时，在页面的最末端打开的datepicker弹出窗口完全在表单字段之外，应该打开它。

任何帮助将不胜感激。

Answer 1

我的问题是我将.mat-form-field-underline设置为隐藏。日期选择器使用此元素来确定位置。

Answer 2

缺少的部分是导入CSS文件angular-material.css

Answer 3

如果您使用touchUi="true"组件上的<matDatepicker>，它会显示为模式。不确定您的网站是否主要用于移动设备，但我发现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

希望这有帮助！

Answer 4

我在使用Material 2 Datepicker的Angular 4时遇到了同样的问题。

以某种方式 node_modules/@angular/material/prebuilt-themes/indigo-pink.css 未在应用程序中链接。我通过在我的根样式表＆＃39; style.css＆＃39;中复制此样式表的内容来修复它。

在项目中添加或链接此样式表： node_modules/@angular/material/prebuilt-themes/indigo-pink.css

Answer 5

我的问题是我有多个带有 #mydate 名称的。我更改了名称，它起作用了！

Answer 6

Ups sory man，你需要添加css样式，position：relative;
mat-datepicker-toggle {position：relative;}或你的父母，祝你好运

Answer 7

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

您需要创建功能点击例如：

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

@ angular / material datepicker位置

7 个答案: