Angular Material DatePicker showing calendar below date field

Question

I am trying to implement a basic date picker inside a dialog exactly as described in the documentation but it does not show the calendar icon correctly. Here is how it looks like:

Here is the html template code for the dialog:

<div class="dialog-header">
  <button mat-icon-button tabindex="-1" (click)="cancel()">
    <mat-icon>close</mat-icon>
  </button>
</div>
<div mat-dialog-content>
  <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 matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</div>

And here is the css code:

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dialog-header {
  display: flex;
  flex-direction: row;
  margin: -10px -10px 10px;

  & > h1 {
      margin: auto 0;
  }

  & > .mat-icon-button {
      margin-left: auto;
      margin-bottom: auto;
  }
}

.mat-dialog-content {
  width: 100%;
  display: flex;
  max-height: unset;
}

I have already tried to remove almost all CSS of all container components but it does not matter, the datepicker is always displayed with this broken layout. I also have no global styles or anything else that could cause this, so I am completely clueless about what is going on here.

Petitionary

Answer 1

I just noticed that I was looking at the wrong documentation (15.1.0-next.0). In that version, matIconSuffix was used instead of matSuffix like in previous versions. After changing matIconSuffix to matSuffix in my code, the problem disappeared.

Petitionary

Answer 2

You can define the placement of the icon by changing the matSuffix directive to the matPrefix directive on the mat-datepicker-toggle, with no additional styling required in the .css file.

See the example I have forked from the docs here.

In your code you seem to be using matIconSuffix, which I didn't find in the current version of the angular-material - if that's not a type, and it is what was being used in an older version, perhaps you might have to change it to matIconPrefix.

Montgolfier

Yes, I was looking at the wrong documentation (see my answer below). I don't know why, but google seems to have redirected me to this version for whatever reason. I didn't realize this until a few minutes ago. – Petitionary

Answer 3

I have the same problem, but using the matSuffix or MatIconSuffix attributes doesn't fix it in the case you have a wrapper around some content inside the mat-form-field.

My code does something like this:

<mat-form-field>
  <mat-label>{{ label }}</mat-label>

  <ng-container *ngIf="type === 'date'; else text">
    <input matInput [matDatepicker]="picker" />
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </ng-container>

  <ng-template #text>
    <input matInput type="text" />
  </ng-template>

  <mat-hint>{{ hint }}</mat-hint>
</mat-form-field>

It doesn't matter if the wrapper is a div or ng-container, which is weird because a ng-container doesn't actually render as a DOM element.

So for anyone else with the same issue, put your structural directives on or outside of the mat-form-field instead.

Kellykellyann

Answer 4

You must change te version of the documentation (at the right top corner) according to your angular material version.

Continuisly are breaking changes, for example mat icons.

ng version <= 13.x  
<mat-icon>home</mat-icon>
    
    
ng version >= 14.x
<mat-icon fontIcon="home"></mat-icon>

Edmondo