Как иметь два сборщика дат с разными датами только месяц и год

Question

Я пытаюсь получить два matdatepicker, от даты и до даты, которые показывают только месяц и год. Я следовал за https://material.angular.io/components/datepicker/overview.

У меня есть два средства выбора даты, но когда я выбираю месяц и год для одного, другой будет обновляться с теми же значениями (наоборот).

HTML

 <div class="row">
          <div class="col-50">
            <mat-form-field>
              <input matInput [matDatepicker]="fromDateDP" 
 placeholder="From Date" #fromDate
              [formControl]="date" name="fromDate">
              <mat-datepicker-toggle matSuffix [for]="fromDateDP"></mat-datepicker-toggle>
              <mat-datepicker #fromDateDP
              startView="multi-year"
              (yearSelected)="chosenYearHandler($event)"
              (monthSelected)="chosenMonthHandler($event, fromDateDP)"
              panelClass="example-month-picker">
              </mat-datepicker>
            </mat-form-field>
          </div>
          <div class="col-50">
            <mat-form-field>
              <input matInput [matDatepicker]="toDateDP" placeholder="To Date" #toDate
                name="todate" [formControl]="date">
              <mat-datepicker-toggle matSuffix [for]="toDateDP" class="md-datepicker-input-container"></mat-datepicker-toggle>
              <mat-datepicker #toDateDP
              startView="multi-year"
              (yearSelected)="chosenYearHandler($event)"
              (monthSelected)="chosenMonthHandler($event, toDateDP)"
              panelClass="example-month-picker">
              </mat-datepicker>
            </mat-form-field>
          </div>
        </div>

Фрагмент TS

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

export class DatepickerViewsSelectionExample {
  date = 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();
  }
}

Как я могу изменить свой код, если я выберу matdatepicker onDate дата не будет обновлять matdatepicker на toDate?

Попытка

Обновлено HTML toDate

HTML

<mat-datepicker-toggle matSuffix [for]="toDateDP" class="md-datepicker-input-container"></mat-datepicker-toggle>
                  <mat-datepicker #toDateDP
                  startView="multi-year"
                  (yearSelected)="chosenYearHandlerTo($event)"
                  (monthSelected)="chosenMonthHandlerTo($event, toDateDP)"
                  panelClass="example-month-picker">
                  </mat-datepicker>
                </mat-form-field>
              </div>

и в компоненте я добавил функции selectedYearHandlerTo и selectedMonthHandlerTo, которые аналогичны приведенному выше коду.

Как видно на примере изображения, оба средства выбора даты обновляются с одинаковыми значениями.