Angular 8, как изменить поставщиков выбора даты материала в соответствии с выбранной вкладкой материала? - PullRequest
Новая
       24

Angular 8, как изменить поставщиков выбора даты материала в соответствии с выбранной вкладкой материала?

2 голосов
/ 09 января 2020

В моем компоненте есть 2 указателя даты. Каждый из них имеет различный mat-tab.

Выбор даты первой вкладки должен быть как MM/YYYY, второй должен иметь нормальную дату DD/MM/YYYY.

Первый шаг Изменение значения DatePicker на MM/YYYY выглядит следующим образом: 

export const MY_FORMATS = {

  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

И: 

<mat-form-field>
      <input matInput formControlName="invoiceDate" [matDatepicker]="picker" placeholder="Choose the Month">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker startView="year" (yearSelected)="getSelectedYear($event)"
                    (monthSelected)="getSelectedMonth($event, picker)">
      </mat-datepicker>
</mat-form-field>

Основная проблема заключается в том, что я добавил второй datepicker в свой второй mat-tab. Где формат MM/YYYY используется для всех существующих средств выбора даты.

Я хочу объявить экспортированную переменную следующим образом: 

export let tab = 1;

И сделал два формата: 

export const MY_FORMATS = {

  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

export const MY_FORMATS_RECEIPTS = {

  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

А на стороне провайдеров: 

providers: [

    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: tab==0?MY_FORMATS:MY_FORMATS_RECEIPTS},
],

Я обновляю tab на mat-tab, щелкнув, используя: 

<mat-tab-group (click)="getTab($event.which)">

И: 

getTab(tab){
    tab = tab
}

Возможно, мне не хватает концепции экспортированных констант и переменных, но это единственное решение, которое у меня есть, и оно не работает.

Если я уже объявил tab как 0, он будет Возьмите первый формат, и когда компонент загружен, а вкладка 1 выбрана, ничего не изменится.

...