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

【问题标题】：How To Apply Multiple MAT_DATE_FORMATS On Same Component如何在同一组件上应用多个 MAT_DATE_FORMATS
【发布时间】：2018-12-05 01:06:36
【问题描述】：

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

在 TypeScript 上：

    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 的典型“管道”，那么如何在同一个组件上使用多种格式？也许有一种方法可以直接在输入上添加自定义格式？任何帮助是极大的赞赏。

【问题讨论】：

嗨，Briana，您找到解决方案了吗？我面临着同样的挑战。干杯！
我也有同样的问题。我关注了这个link，它对我有用。

标签： angular datepicker formatting angular-material

【解决方案1】：

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

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

可以在here找到使用 NativeDateAdapter 的工作示例

【讨论】：