CODEWITHSUNDEEP
angularangular-material
Peter Wilson
Peter Wilson

Reputation: 4319

@angular/material datepicker position

I am using @angular/material2 module to add datepicker to my angular 4 app.

here is my 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';

when I click on the datepicker toggler the datepicker popup is opened at the very end of the page completely outside the form field it should be opened at.

any help will be appreciated.

Upvotes: 12

Views: 24093

Answers (8)

Nidhal Ben Tahar
Nidhal Ben Tahar

Reputation: 999

This problem may also occur if you hide the <input matInput (for whatever reason).

If you must hide the input, then don't need use display: none because it would be impossible to calculate the position of the calendar. Use visibility: hidden instead or set the input width and height to 0, etc.

Upvotes: 0

Jhenrry Alvaro Mamani Javier
Jhenrry Alvaro Mamani Javier

Reputation: 51

my problem was that I had more than one <mat-datepicker #mydate> with #mydate name. I changed the names and it works!

Upvotes: 1

Mikel Porras Hoogland
Mikel Porras Hoogland

Reputation: 537

My problem was I had set .mat-form-field-underline to hidden. The date picker uses this element to determine position.

Upvotes: 11

Nicholas Pesa
Nicholas Pesa

Reputation: 2196

If you use the touchUi="true" on the <matDatepicker> component it appears as a modal. Not sure if your site is going to be mostly used on mobile but I find this appearance for the matDatepicker to be more desired.

Here is the 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

Hope this helps!

Upvotes: 9

Peter Wilson
Peter Wilson

Reputation: 4319

The missing part was to import the CSS file angular-material.css

Upvotes: 6

Adnan
Adnan

Reputation: 111

I was also getting the same issue with Angular 4 with Material 2 Datepicker.

Somehow node_modules/@angular/material/prebuilt-themes/indigo-pink.css is not getting linked in application. I fixed it by copying the content of this style sheet in my root style sheet 'style.css'.

Add or link this style sheet in your project: node_modules/@angular/material/prebuilt-themes/indigo-pink.css

Upvotes: 2

Lakostik Kos
Lakostik Kos

Reputation: 1

Ups sory man, you need add css style, position: relative;
mat-datepicker-toggle {position: relative;} or you parent, good luck

Upvotes: -2

Lakostik Kos
Lakostik Kos

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

You need create function click ex:

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

Upvotes: -2

Related Questions