Angular Material DatePicker 在日期字段下方显示日历

Question

我正在尝试完全按照文档中的描述在对话框中实现一个基本的日期选择器，但它没有正确显示日历图标。 这是它的样子：

这是对话框的 html 模板代码：

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

这是 css 代码：

: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;
}

我已经尝试删除所有容器组件的几乎所有 CSS 但没关系，日期选择器始终以这种损坏的布局显示。 我也没有全局 styles 或任何其他可能导致此问题的原因，所以我对这里发生的事情一无所知。

Answer 1

您可以通过将mat-datepicker-toggle上的matPrefix指令更改为matSuffix指令来定义图标的位置，而无需在 .css 文件中添加其他样式。

请参阅我从此处的文档中分叉的示例。

在您的代码中，您似乎正在使用matIconSuffix ，我在angular-material的当前版本中没有找到它 - 如果这不是一种类型，并且它是旧版本中使用的类型，也许您可能需要将其更改为matIconPrefix 。

Answer 2

我只是注意到我看错了文档 (15.1.0-next.0)。 在该版本中，使用了matIconSuffix而不是以前版本中的matSuffix 。 在我的代码中将matSuffix matIconSuffix ，问题就消失了。

Answer 3

我有同样的问题，但是如果您在 mat-form-field 中的某些内容周围有一个包装器，则使用matSuffix或MatIconSuffix属性并不能解决这个问题。

我的代码做这样的事情：

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

包装器是div还是ng-container并不重要，这很奇怪，因为ng-container实际上并不呈现为 DOM 元素。

因此，对于遇到相同问题的其他任何人，请将您的结构指令放在mat-form-field之上或之外。