刷新物料日历 [英] Refresh the material calendar

问题描述

刷新 mat-calendar 图像 的问题.显示了日历的初始当前月份，但如果我选择下个月的任何日期，那么 mat-calendar 将不会随下个月更新.

A problem with refresh the mat-calendar image. an initial current month of the calendar was displayed, but if I select any date of next month then the mat-calendar will not update with the next month.

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

expected result: select any date, mat calendar jump, or shows to the selected date

我尝试如何刷新更改突出显示日期的背景后的 mat-calendar 仍然存在上述问题.

I try How to refresh mat-calendar after changing the background of highlighted dates also but still phasing with the above problem.

推荐答案

我也遇到了这个问题.这是一个解决方案(这里我使用的是 moment.js.Date 也能正常工作)

I also encountered this problem. Here is a solution (here I use moment.js. Date works just as well)

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.这里举个例子，它只会切换到下个月的实际月份的日期

You can adapt the variable smallCalendarStartAt. Here, for the example, it will only switch to the next month with the day of the actual month

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

Here is a demo with the Date function: DEMO

这篇关于刷新物料日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！