javascript - 季度日期选择器

Question

我正在寻找一个季度日期选择器，最好使用 Angular，如下所示:

Bootstrap 和(Angular)Material 似乎都不提供此功能。

是否有任何其他现有框架/库可以提供此功能？

Answer 1

为什么不使用，例如 Material 中的自动完成功能，例如

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <button mat-icon-button (click)="change(-1)"><</button>{{year}}<button mat-icon-button (click)="change(1)">></button>
      <mat-option *ngFor="let option of options;let i=index" [value]="option.value">
        {{option.value}}<span *ngFor="let month of option.months">{{month}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

options: any[] = [
    {value:1,months:['Ene','Feb','Mar']},
    {value:2,months:['Apr','May','Jun']},
    {value:3,months:['Jul','Ago','Sep']},
    {value:4,months:['Oct','Nov','Dec']}
  ];
  year=new Date().getFullYear()
  change(inc)
  {
    this.year+=inc
  }

在stackblitz中查看一个愚蠢的例子