Angular 角度5+；季度报告的物料日期选择器

我需要一个代码来自定义角材质日期选择器，以以下格式显示

我需要在第五年取得成绩，我甚至可以先选择年份，然后选择季度。有人能帮帮我吗

[编辑]我无法获得以下版本。我试图禁用其他月份，只显示每个季度的开始月份，比如一月、四月

代码是

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

---

你自己试过什么？你的代码起点在哪里？嗨@Roy，附上代码嗨，大家好，有人能帮我吗

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

}

}

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