以编程方式在 mat-calendar（来自 mat-datepicker）对象上设置当前视图？

Question

我正在尝试使用 angular material2 制作一个“持久”的月/年选择器 - 问题是我不想要传统的日期选择器，而只是日历部分，它将始终保持打开状态并显示所选月份。我的功能或多或少都在工作，但问题是一旦您选择了月份，“智能”日历会自动将视图更改为日期选择器。

当前代码：

HTML

<mat-calendar #monthPicker
              startView="year"
              (yearSelected)="yearChosen($event, date)"
              (monthSelected)="monthChosen($event, date, monthPicker)"
              [selected]="date"
></mat-calendar>

TS（相关部分）

yearChosen(year : Date, date : Date){
 //(date is a reference to a class-level date variable, just holds the current value)
  date.setFullYear(year.getFullYear())
}

monthChosen(month: Date, dateObj : Date, calendar : MatCalendar<Date>){
  date.setMonth(month.getMonth());
  //SOME CODE TO MAKE CALENDAR NOT PROCEED TO THE DAY VIEW???
}

我试过弄乱 datepicker 对象上的对象，但似乎没有任何效果：

• calendar.currentView = '年'
• calendar._goToDateInView(date,'year')
• 日历。（年视图和月视图，各种事情）

Answer 1

您可以使用 startAt 属性：

 <mat-calendar class="month-calendar" [startAt]="selectedMonth"></mat-calendar>

将 startAt 与组件中的 Date 对象绑定：

selectedMonth: Date;

注入日历组件参考：

@ViewChild(MatCalendar, {static: false}) calendar: MatCalendar<Date>;

然后您可以以编程方式更改月份并刷新日期选择器：

this.selectedMonth.setMonth(this.selectedMonth.getMonth() + 1);
this.calendar.updateTodaysDate();