Question

我正在尝试使用有角度的材质制作一个“永久性”的月/年选择器2-收获是我不想要传统的日期选择器，而只是日历部分，它将始终保持打开状态并显示选择的月份。我的功能或多或少都在起作用，但问题是选择了月份后，“智能”日历会自动将视图更改为日期选择器。

当前代码：

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 ='year'
calendar._goToDateInView（date，'year'）
日历。（yearView和monthView，各种东西）

Answer 1

您可以使用startAt属性：

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

使用组件中的Date对象绑定startAt：

selectedMonth: Date;

注入日历组件参考：

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

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

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

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

1 个答案: