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

Question

我有一个包含许多日期输入的组件。除了一个之外，所有这些都将使用标准格式 (MM/DD/YYYY)。我在这里阅读，这帮助我弄清楚如何获得我想要的 customFormat (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 的工作示例（感谢上面链接中的Abishek）。

可以在此处找到 NativeDateAdapter 的工作示例