Angular Material 7 date-picker如何在当月视图开头显示上月置灰日期

实现需求不需要自定义复杂逻辑，Angular Material 7 的 datepicker 原生提供了对应配置属性，直接启用即可：

核心配置属性 #

• showOtherMonths：布尔类型，默认值为false，设为true后，当前月份视图的首尾空白区域会自动填充上月末尾、下月开头的日期
• otherMonthSelectable：布尔类型，默认值为true，设为false后，填充的非当前月日期会变为置灰状态，且无法被用户选中

代码示例 #

<mat-form-field appearance="fill">
  <mat-label>选择日期</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <!-- 核心配置加在mat-datepicker标签上 -->
  <mat-datepicker 
    #picker
    [showOtherMonths]="true"
    [otherMonthSelectable]="false"
  >
  </mat-datepicker>
</mat-form-field>

如果你使用的是独立的mat-calendar组件，直接把上述两个属性加在<mat-calendar>标签上即可生效。

内容的提问来源于stack exchange，提问作者Meet Patel