我正在使用@ 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弹出窗口完全在表单字段之外,它应该打开 .
任何帮助将不胜感激 .
6 回答
如果在
<matDatepicker>
组件上使用touchUi="true"
,它将显示为模态 . 不确定您的网站是否主要用于移动设备,但我发现matDatepicker的外观更为理想 .这是标记:
希望这可以帮助!
我的问题是我已将
.mat-form-field-underline
设置为隐藏 . 日期选择器使用此元素来确定位置 .缺少的部分是导入CSS文件
angular-material.css
使用Material 2 Datepicker时,我也遇到了与Angular 4相同的问题 .
某种程度上 node_modules/@angular/material/prebuilt-themes/indigo-pink.css 没有在应用程序中链接 . 我通过在我的根样式表'style.css'中复制此样式表的内容来修复它 .
在项目中添加或链接此样式表: node_modules/@angular/material/prebuilt-themes/indigo-pink.css
你需要创建功能点击ex:
Ups sory man,你需要添加css样式,位置:相对;
mat-datepicker-toggle {position:relative;}或你的父母,祝你好运