如何在同一组件上应用多个 MAT_DATE_FORMATS

Question

我有一个包含许多日期输入的组件。除其中一个外，所有这些都将使用标准格式 (MM/DD/YYYY)。我读到了here，它帮助我弄清楚如何获取我想要的自定义格式（MM/YYYY），但现在它显示在每个日期输入上，因为组件级别上提供了“useValue”。这让我想到了这个问题，我找不到正确的答案。如何在同一个组件上拥有多种格式？

在打字稿上：

    export const COMMISSION_DATE_FORMATS = {
      parse: {
        dateInput: 'MM/YYYY',
      },
      display: {
        dateInput: 'MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
      },
    };
...    
    providers: [
        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
        { provide: MAT_DATE_FORMATS , useValue: COMMISSION_DATE_FORMATS },
      ]

在用户界面上：

需要自定义格式（正确显示）

  <mat-form-field>
        <input matInput [matDatepicker]="dSaleMonthPicker" placeholder="Commission Month & Year" formControlName="dSaleMonth">
        <mat-datepicker-toggle matSuffix [for]="dSaleMonthPicker"></mat-datepicker-toggle>
        <mat-datepicker #dSaleMonthPicker startView="multi-year" (yearSelected)="commissionDateYearHandler($event)" (monthSelected)="commissionDateMonthHandler($event, dSaleMonthPicker)">
        </mat-datepicker>
     </mat-form-field>

其他需要标准格式（但也以自定义格式显示）

  <mat-form-field>
      <input matInput formControlName="dSold" [matDatepicker]="dSoldPicker" placeholder="Sold Date" matTooltipPosition="below">
      <mat-datepicker-toggle matSuffix [for]="dSoldPicker"></mat-datepicker-toggle>
      <mat-datepicker #dSoldPicker [startAt]="dSold"></mat-datepicker>
    </mat-form-field>

我知道对于 formControlName，我无法使用 Angular 中的典型“管道”，那么如何在同一组件上拥有多种格式呢？也许有一种方法可以直接在输入上添加自定义格式？任何帮助是极大的赞赏。

Answer 1

我找到了最好的答案这里。基本上，我们需要创建多个具有不同格式的指令并将所需的指令附加到日期选择器。

MomentDateAdapter 的工作示例可以在 here 找到（感谢上面链接中的 Abishek）。

可以在 here

找到 NativeDateAdapter 的工作示例