node.js - 如何使用 Angular( Material ) 在 mat-calendar 中设置默认月份和年份？

Question

我需要使用 Angular 在多个 mat 日历中设置默认月份和年份。

创建结果：

预期结果 ：

标签： node.jsangularangular-material

Answer 1

正如Material Documenation建议的那样，您可以为 startDate 和 startView 提供价值。在您的情况下，您可能会使用以下内容：

import { Component } from '@angular/core';

/** @title Datepicker start date */
@Component({
  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html'
})
export class DatepickerStartViewExample {
  startDate = new Date(2021, 0, 1);
}

startDate在您的组件中 初始化

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="month" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

并将startAt属性添加到您的 HTML，并提供startView月份的属性值以打开DatePicker月份选择。