如何在mat-datepicker上选择年份？

Question

我正在开发一个带有角8的应用程序，其中我有一个只包含年份号的输入。我用过垫子-数据机，只想选择年份.

<mat-form-field class="input-control">
      <input matInput placeholder="{{'enter'|translate}}.." [formControl]="form.controls.openedAt"
             [matDatepicker]="date" readonly>
      <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
      <mat-datepicker #date startView="multi-year"></mat-datepicker>
    </mat-form-field>

此代码首先显示年份视图，但当我选择年份时，将打开月份视图，然后打开“天”视图。

那么，我如何选择仅年份，或仅显示的一年视图垫-数据？

Answer 1

这个特性还没有完全实现。你可以在这里看到：

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

，现在您可以尝试如下：

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

Answer 2

我确实喜欢这个(角14支撑)：

component.html：

<mat-form-field appearance="outline">
    <mat-label>Ano</mat-label>
    <input [(ngModel)]="selectYear" [formControl]="dateForm" matInput [matDatepicker]="picker" />
    <mat-datepicker-toggle matSuffix [for]="picker" ></mat- datepicker-toggle>
    <mat-datepicker #picker startView="multi-year" (yearSelected)="chosenYearHandler($event, picker)">
    </mat-datepicker>
</mat-form-field>

component.ts：

export const MY_FORMATS = {
  parse: {
    dateInput: 'YYYY',
  },
  display: {
    dateInput: 'YYYY',
    monthYearLabel: 'YYYY',
    monthYearA11yLabel: 'YYYY',
  },
};

@Component({
    providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { 
     provide: MAT_DATE_FORMATS, useValue: MY_FORMATS
    },
   ]
})

export class MainFormComponent implements OnInit {

    @ViewChild('picker', { static: false })
    private picker!: MatDatepicker<Date>;  

    chosenYearHandler(ev, input){
      let { _d } = ev;
      this.selectYear = _d;
      this.picker.close()
    }
}

它的工作很好，非常简单！