html - Usar múltiples selectores de fecha en el mismo componente Angular 11

Estoy teniendo el siguiente problema: quiero mostrar dos selectores de fecha diferentes en el mismo componente, pero permitiendo seleccionar solo el año en uno, y el año y el mes en el otro. He intentado usar múltiples proveedores de la siguiente manera:

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},
  ],
})

Y ellos haciendo esto para permitir que el usuario solo seleccione las cosas que mencioné antes:

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();
  }

Y finalmente mi HTML es este:

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

Si tienes algún consejo sobre cómo implementar correctamente múltiples proveedores o cómo indicar en cada entrada el formato de fecha que corresponde, o simplemente una mejor manera de hacer esto, te agradeceré si me ayudas.

Respuesta #1

Aquí tienes la respuesta: https://stackoverflow.com/a/60038450/11218448

Esta función aún no está completamente implementada. Puedes verlo aquí:

https://github.com/angular/components/issues/4853

Por ahora puedes intentar esto:

https://stackblitz.com/edit/angular-mulitdate-picker-demo