@ eckig/material datepicker position

Question

Ich benutze @ angular/material2 Modul, um datepicker zu meiner eckigen 4 App hinzuzufügen.

hier ist mein 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'; 

wenn ich toggler der Datepicker Popup auf dem picker klicken ist ganz am Ende der Seite vollständig außerhalb der Form geöffnet Feld sollte es bei geöffnet werden.

jede Hilfe wird geschätzt.

Answer 1

Der fehlende Teil der CSS-Datei angular-material.css

Answer 2

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

Sie benötigen Funktion Klick ex erstellen:

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

Answer 3

Ups sory Mann, müssen Sie CSS-Stil, Position hinzufügen: relative;
Mat-Datepicker-Toggle {Position: relative;} oder Sie Eltern, viel Glück

Answer 4

Ich bekam auch das gleiche Problem mit Angular 4 mit Material 2 Datepicker.

Irgendwie node_modules/@angular/material/prebuilt-themes/indigo-pink.css wird nicht in der Anwendung verknüpft. Ich habe es behoben, indem ich den Inhalt dieses Stylesheets in mein Root-Stylesheet 'style.css' kopiert habe.

Hinzufügen oder Link zu diesem Stylesheet in Ihrem Projekt: node_modules/@angular/material/prebuilt-themes/indigo-pink.css

Answer 5

zu importieren war

Wenn Sie die Komponente touchUi="true" für die Komponente <matDatepicker> verwenden, wird sie als modal angezeigt. Ich bin mir nicht sicher, ob deine Seite hauptsächlich auf Mobilgeräten verwendet wird, aber ich finde, dass diese Erscheinung für den matDatepicker besser geeignet ist. Hier

ist das Markup:

<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 

hoffe, das hilft!

Answer 6

Mein Problem war, ich hatte 10 zu verstecken. Die Datumsauswahl verwendet dieses Element, um die Position zu bestimmen.