Question

我将材料日历组件与已构建的自定义导航一起使用，该导航显示在日历中选择日期后的5天。

当您在自定义元素中选择一个日期时，它将使用新选择的日期更新日历，但是如果输入日期是下个月，我希望日历自动切换到该月。

HTML：

<mat-calendar [selected]="selectedDate" (selectedChange)="onDateSelected($event)"
  [minDate]="minDate" [dateClass]="dateClass"></mat-calendar>

TS：

@Input() set incomingDate(d: Date) {
    this.selectedDate = d; // sets the incoming date on mat-calendar
    this.dateClass(d); // highlights the next 5 days in the mat-calendar
    this.calendar.updateTodaysDate(); // re-renders calendar to see changes
}

有什么我可以绑定到元素的方法来解决此问题？谢谢！

Answer 1

您可以使用_goToDateInView。它不会更改日期对象，只会转到您作为参数传递的月份，因此您可以保持日期选择逻辑完整。

/** Handles year/month selection in the multi-year/year views. */
_goToDateInView(date: D, view: 'month' | 'year' | 'multi-year'): void;

这是您如何使用它：

模板

<mat-calendar #calendar></mat-calendar>

组件

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

public goToDate() {
   this.calendar._goToDateInView(someDateObjectInAnotherMonth, 'month')
}

Stackblitz

Answer 2

您也可以尝试以下方法。（在我检查了实现-> MatCalendar后为我工作）。

SELECT *
FROM
(
    SELECT table.*, @counter := @counter +1 counter
    FROM (select @counter:=0) initvar, table
    ORDER BY score
) X
WHERE X.counter <= (25/100 * @counter)
ORDER BY score

Answer 3

使用[startAt]自动跳至初始设置日期的月份。

    <mat-calendar [minDate]="minDate" 
                  [maxDate]="maxDate" 
                  [startAt]="nextShipmentDt$ | async"
                  [selected]="nextShipmentDt$ | async"></mat-calendar>

如何以编程方式更改材料日历中的月份<mat-calendar>

3 个答案: