Угловой сборщик даты 5+ для Квартального отчета

Question

Мне нужен код, чтобы настроить угловой инструмент выбора даты для отображения в следующем формате.

Мне нужно достичь углового 5, и я в порядке, даже выбрав сначала год, а затем квартал.Пожалуйста, может кто-нибудь помочь мне

[РЕДАКТИРОВАТЬ] Я не смог добиться ниже версии.Я пытался отключить другие месяцы и отображать только начальный месяц каждого квартала, скажем, JAN, APR ..

Код

 <div id = "quarterPicker" class="innerContainer well-sm" [hidden]="isQuarterHidden">
      <app-custom-date-picker mode="QUARTER" label="Report Start quarter"  i18n-label=@@reportstartQuarter [(ngModel)]="chosenQarterDate" (ngModelChange)="kpiDateChanged($event,'quarter')"></app-custom-date-picker><br>
    </div>

- в пользовательском средстве выбора даты

  export class CustomDatepickerComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
  @Input() mode: 'YEAR' | 'MONTH' | 'MONTHYEAR' | 'WEEK' | 'QUARTER' | '' | null;

@Input() label = '';

@Input() max: any;

@Input() min: any;

@Input() touchUi = false;

_yearPickerCtrl: FormControl = new FormControl();
_monthPickerCtrl: FormControl = new FormControl();
_regularPickerCtrl: FormControl = new FormControl();

 private _onDestroy: Subject<void> = new Subject<void>();

  ngAfterViewInit() {

  switch (this.mode) {
  case 'YEAR':
    this._subscribeToChanges(this._yearPickerCtrl);
    break;

  case 'MONTH':
  case 'QUARTER':
  case 'MONTHYEAR':
    this._subscribeToChanges(this._monthPickerCtrl);
    break;

  default:
    this._subscribeToChanges(this._regularPickerCtrl);

}

}

- В месяцPicker.ts

  private _setupFilter() {
switch (this.mode) {
  case 'QUARTER':
    this._customFilter = (d: Moment) => {
      return d.month() === 0 || d.month() === 3 || d.month() === 6 || d.month() === 9;
    };
    break;
}