如何在 mat-datepicker 上仅选择年份答案

【问题标题】：How to select only year on mat-datepicker如何在 mat-datepicker 上仅选择年份
【发布时间】：2020-02-03 10:36:29
【问题描述】：

我正在开发一个角度为 8 的应用程序，其中我有一个仅包含年份编号的输入。我用过 mat-datepicker，只想选择年份。

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

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

那么我怎样才能只选择年份，或者在 mat-datepicker 上只显示年份视图？

【问题讨论】：

标签： angular-material angular8 mat-datepicker

【解决方案1】：

此功能尚未完全实现。你可以在这里看到：

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

现在你可以试试这个：

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

【讨论】：

material.angular.io/components/datepicker/…

【解决方案2】：

I did like this:

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: 

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

, 提供者：[ { 提供：日期适配器，使用类：MomentDateAdapter，部门：[MAT_DATE_LOCALE，MAT_MOMENT_DATE_ADAPTER_OPTIONS] },

{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},

]

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

Its works well and very simple!!!

【讨论】：

您的解决方案非常棒！但我发现“input._destroyPopup()”不起作用，所以我不得不使用@ViewChild 访问日期选择器并使用“关闭”功能关闭它。我的代码：@ViewChild('picker', {static: false}) 私人选择器：MatDatepicker;并且 selectedYearHandler 方法更改为： selectedYearHandler(ev, input){ let { _d } = ev; this.selectYear = _d; this.picker.close(); }