Why is my angular material datepicker below my input and not inside it?

userSyMk1 0
Viewed 21

I don't know what I'm doing wrong...

here's my html:

 <div class="col-md-2">
            <label class="label-form" for="dataNascimento">Data de Nascimento:</label>
            <input matInput [matDatepicker]="picker" class="input-form" [formControl]="_dataNascimento" type="text" id="dataNascimento" value="">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </div>
angular-material angular
1 Answers

As per documentation basic date picker should be look like this. Within mat-form-field tag.

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

https://material.angular.io/components/datepicker/overview

Stackblits

Kelum Bandara0
Related