Angular Material 2 DatePicker,动态更改显示格式

时间:2017-08-01 20:49:56

标签: angular typescript datepicker angular-material2

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

似乎有一种方法可以通过覆盖使用过的" Date Adapter"来全局扩展它,但这对我不起作用,因为我可能需要不同的日期时间选择器来使用不同的格式。我无法在全球范围内设置它。是否有任何已知的解决方法?

1 个答案:

答案 0 :(得分:1)

您可以创建另一个输入,以显示格式化的日期值。在您的html中为ngModelmatDatepicker创建一个输入,另一个显示格式化的日期值。

<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

上的有效示例