Angular Material 2 DatePicker，动态改变显示格式

Question

我正在使用 Angular 2 Material 的 DatePicker 组件 here ，并且我希望能够动态设置(即 YYYY-MM-DD 或 DD-MM-YYYY 等)的显示格式

似乎有一种方法可以通过覆盖使用的“日期适配器”来全局扩展它，但这对我不起作用，因为我可能需要不同的日期时间选择器来具有不同的格式。我不能全局设置它。是否有任何已知的解决方法？

Answer 1

您可以创建另一个将显示格式化日期值的输入。在您的 html 中为 ngModel 创建一个输入和 matDatepicker ，另一个显示格式化的日期值。

<div style="position: relative">
  <!-- display formatted value -->
  <mat-form-field>
    <input
      matInput
      [value]="currentDate | dateFilter: dateFormat"
      [placeholder]="label"
      autocomplete="off"
    />

    <!--shadow input keep ngModel value-->
    <input
      [matDatepicker]="picker"
      [(ngModel)]="value"
      class="shadow-dateInput"
    />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</div>

这是 Stackblitz 上的一个工作示例