Angular PrimeNG月份选择器：高亮当前月及设置月份级maxDate

问题描述 #

我正在用PrimeNG做月份选择器，代码如下：

<p-calendar 
  [(ngModel)]="date" 
  view="month" 
  dateFormat="mm/yy"
  inline="true"
  [readonlyInput]="true">
  <ng-template pTemplate="date" let-date>
    <span [class.active-month]="isActiveMonth(date)">{{date.month}}+</span>
  </ng-template>
</p-calendar>

发现设置view="month"后，pTemplate="date"模板根本不触发，只有删掉view属性显示日期的时候才生效。现在月份选择功能是好的，但有两个需求搞不定：

1. 组件刚加载时自动高亮当前月份
2. 怎么针对月份而不是日期设置maxDate

解决方案 #

1. 加载时高亮当前月 #

当开启view="month"模式时，得用pTemplate="month"模板来定制月份项，而不是pTemplate="date"——不同视图对应不同的模板类型，之前用错模板了。修改后的代码如下：

<p-calendar 
  [(ngModel)]="date" 
  view="month" 
  dateFormat="mm/yy"
  inline="true"
  [readonlyInput]="true">
  <ng-template pTemplate="month" let-month>
    <span [class.active-month]="isCurrentMonth(month)">{{month.month}}</span>
  </ng-template>
</p-calendar>

然后在组件类里写个判断当前月的方法：

isCurrentMonth(month: any): boolean {
  const now = new Date();
  // 注意PrimeNG的month对象里的month属性是从0开始计数的，和JS原生Date一致
  return month.year === now.getFullYear() && month.month === now.getMonth();
}

最后加个高亮的CSS样式：

.active-month {
  background-color: #007ad9;
  color: #fff;
  border-radius: 50%;
  padding: 4px 8px;
}

2. 针对月份设置maxDate #

maxDate本身接受的是Date类型，要限制到月份级别，只要把maxDate设为目标月份的最后一天就行。比如要限制只能选到2024年6月：

先在组件类里定义maxDate：

maxDate: Date = new Date(2024, 6, 0); 
// 这里6代表JS原生的7月，减1天就是6月的最后一天（6月30日）

然后在模板里绑定这个属性：

<p-calendar 
  [(ngModel)]="date" 
  view="month" 
  dateFormat="mm/yy"
  inline="true"
  [readonlyInput]="true"
  [maxDate]="maxDate">
  <ng-template pTemplate="month" let-month>
    <span [class.active-month]="isCurrentMonth(month)">{{month.month}}</span>
  </ng-template>
</p-calendar>

这样用户选月份时，所有晚于2024年6月的月份都会被禁用，因为对应的日期会超过设置的maxDate。

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