Как применить несколько MAT_DATE_FORMATS для одного компонента - PullRequest
Новая
       14

Как применить несколько MAT_DATE_FORMATS для одного компонента

0 голосов
/ 05 декабря 2018

У меня есть компонент, который содержит много входных данных.Все они, кроме одного, будут использовать стандартный формат (ММ / ДД / ГГГГ).Я прочитал здесь , что помогло мне понять, как получить нужный формат (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>

enter image description here

Другие, требующие стандартного формата (но они также отображаются в произвольном формате) 

  <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>

enter image description here

Я знаю, что с formControlName я не могу использовать типичные "трубопроводы" из Angular, так как я могу иметь несколько форматов на одном компоненте?Возможно, есть способ добавить пользовательский формат непосредственно на вход?Любая помощь очень ценится.

...