1

what can i do to get this fixed?

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

this is the issue

this is what I'm expecting

Orlando Macias
  • 11
  • 2
  • Did you figure out what happened here? I'm running into the exact same issue. Pretty sure I have all my styles imported properly as other mat components are looking correct. – S. Buda Apr 04 '23 at 15:46
  • It doesn't feel that correct so I'm not posting it as an answer, but I added this style to my main stylesheet to fix this: mat-datepicker-toggle button.mat-icon-button { position: absolute; top: -10px; right: 0px; } – S. Buda Apr 04 '23 at 15:57

1 Answers1

0

It’s possible you have a version of material that’s not up to date. Before version 15, use and "matSuffix and not "matIconSuffix"

You can have a look here: https://github.com/angular/components/blob/main/guides/v15-mdc-migration.md

starball
  • 20,030
  • 7
  • 43
  • 238
oliv
  • 11
  • 2