html - 同じコンポーネントAngular 11で複数の日付ピッカーを使用する

Question

私は次の問題を抱えています:同じコンポーネントに2つの異なる日付ピッカーを表示したいのですが、一方は年のみ、もう一方は年と月のみを選択できるようにします。次のように複数のプロバイダーを使用してみました。

export const MY_FORMATS_MONTH = {


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

export const MY_FORMATS_YEAR = {
  parse: {
    dateInput: 'YYYY',
  },
  display: {
    dateInput: 'YYYY',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

@Component({
  selector: /.../
  templateUrl: /.../
  styleUrls: /.../
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {provide: MAT_DATE_FORMATS, useValue: {MY_FORMATS_MONTH, MY_FORMATS_YEAR}, multi: true},
  ],
})

そして、ユーザーが前に述べたもののみを選択できるようにするために、これを行っています。

export class #MyClass implements OnInit {
  date = new FormControl(moment());
  year = new FormControl(moment());

  chosenYearHandler(normalizedYear: Moment) {
    const ctrlValue = this.date.value;
    ctrlValue.year(normalizedYear.year());
    this.date.setValue(ctrlValue);
  }

  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue = this.date.value;
    ctrlValue.month(normalizedMonth.month());
    this.date.setValue(ctrlValue);
    datepicker.close();
  }

  chosenOnlyYearHandler(normalizedYear: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue = this.year.value;
    ctrlValue.year(normalizedYear.year());
    this.year.setValue(ctrlValue);
    datepicker.close();
  }

そして最後に私のhtmlはこれです：

<!-- Year  -->
    <div>
      <mat-form-field class="form-field col-sm-4">
        <mat-label>Year</mat-label>
        <input matInput [matDatepicker]="dpy" [formControl]="year">
        <mat-datepicker-toggle matSuffix [for]="dpy"></mat-datepicker-toggle>
        <mat-datepicker #dpy
                        startView="multi-year"
                        (yearSelected)="chosenOnlyYearHandler($event, dpy)"
                        panelClass="example-year-picker">
        </mat-datepicker>
      </mat-form-field>          
    </div>

<!-- Month & Year  -->
    <div>
      <mat-form-field class="form-field col-sm-4">
        <mat-label>Month and Year</mat-label>
        <input matInput [matDatepicker]="dp" [formControl]="date">
        <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
        <mat-datepicker #dp
                        startView="multi-year"
                        (yearSelected)="chosenYearHandler($event)"
                        (monthSelected)="chosenMonthHandler($event, dp)"
                        panelClass="example-month-picker">
        </mat-datepicker>
      </mat-form-field>
    </div>

複数のプロバイダーを正しく実装する方法や、各入力に対応する dateFormat を示す方法、またはこれを行うためのより良い方法についてアドバイスがあれば、助けていただければ幸いです。