首页 文章

@ angular / material datepicker位置

提问于
浏览
3

我正在使用@ 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 回答

  • 3

    如果在 <matDatepicker> 组件上使用 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
    

    希望这可以帮助!

  • 3

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

  • 1

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

  • 0

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

  • -1
    <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">
    
  • -1

    Ups sory man,你需要添加css样式,位置:相对;
    mat-datepicker-toggle {position:relative;}或你的父母,祝你好运

相关问题