刷新物料日历答案

【问题标题】：Refresh the material calendar刷新物料日历
【发布时间】：2021-04-23 19:20:53
【问题描述】：

刷新 mat-calendar image 时出现问题。显示了日历的初始当前月份，但如果我选择下个月的任何日期，则 mat-calendar 将不会在下个月更新。

预期结果：选择任何日期，垫日历跳转，或显示到所选日期

我也尝试了How to refresh mat-calendar after changing the background of highlighted dates，但仍在逐步解决上述问题。

【问题讨论】：

标签： angular-material

【解决方案1】：

我也遇到过这个问题。这是一个解决方案（这里我使用 moment.js。Date 也可以）

HTML

<mat-calendar #smallCalendar
    [startAt]="smallCalendarStartAt"
    [selected]="smallCalendarSelected">
</mat-calendar>

打字稿

// Small calendar properties
@ViewChild('smallCalendar', { static: false }) smallCalendar: MatCalendar<Date>;
smallCalendarStartAt: Date;  
smallCalendarSelected: any;

// Refresh the small calendar
this.smallCalendarStartAt = new Date(moment().year(), +moment().format('MM'), +moment().format('DD'));
this.smallCalendarSelected = this.smallCalendarStartAt; // Update the selected day in mat-calendar
this.smallCalendar._goToDateInView(this.smallCalendarStartAt, 'month'); // Update the month in the mat-calendar

您可以调整变量 smallCalendarStartAt。这里以实际月份的日期为例，只会切换到下个月

这是一个带有日期函数的演示：DEMO

【讨论】：