Question

我有一个包含许多日期输入的组件。所有这些（但只有一种）将使用标准格式（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中的典型“管道”，因此如何在同一组件上使用多种格式？也许有一种方法可以直接在输入中添加自定义格式？任何帮助是极大的赞赏。

Answer 1

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

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

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

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

1 个答案: