@ angular/material日期選擇器位置

我正在使用@ angular/material2模塊將datepicker添加到我的角度4應用程序。@ angular/material日期選擇器位置

這裏是我的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';

當我點擊日期選擇器toggler的日期選擇器彈出頁面的最後打開完全的形式外它應該打開的領域。

任何幫助將不勝感激。

來源

2017-10-14 Peter Wilson

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

來源

2017-10-29 13:10:14

此樣式表爲我工作：**node_modules/@angular/material/prebuilt_themes/indigo_pink.css**工作爲了我 – Louis

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

來源

2017-10-20 12:48:40

彈出窗口是用'mat-datepicker-toggle'打開的，這不是我的問題，請再次檢查我的問題 –

-1

跌宕索裏的人，你需要添加CSS樣式，位置是：相對的;
墊日期選擇器，切換{位置：相對;}或者你的父母，好運氣

來源

2017-10-23 13:16:26

我也與材料2日期選擇器得到了同樣的問題與角4。

莫名其妙node_modules/@angular/material/prebuilt-themes/indigo-pink.css未在應用程序中獲得鏈接。我通過在我的根樣式表'style.css'中複製此樣式表的內容來修復它。

添加或在您的項目鏈接這個樣式表：node_modules/@angular/material/prebuilt-themes/indigo-pink.css

來源

2017-10-25 17:00:38 Adnan

如果您使用<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

希望這有助於！

來源

2017-11-06 21:09:58

我的問題是我設置了.mat-form-field-underline隱藏。日期選取器使用此元素來確定位置。

來源

2018-02-09 10:23:27

@ angular/material日期選擇器位置

回答

相關問題