如何让p-calender直接显示可用日期并默认展示无禁用日期月份？

这个场景我之前也碰到过，默认打开日历全是禁用日期确实挺影响用户体验的。咱们可以通过控制p-calendar的viewDate属性来实现默认展示第一个有可用日期的月份，具体操作如下：

1. 明确禁用规则并定位第一个可用月份 #

首先你得确定自己的禁用截止日期，然后找到第一个存在可用日期的月份。比如你的场景是禁用截至5月15日的所有日期，那第一个可用月份就是5月（5月16日及之后的日期是可选的）。

2. 用viewDate指定初始视图月份 #

PrimeNG的p-calendar提供了viewDate输入属性，它能直接控制日历打开时默认显示的月份。我们只需要把第一个可用月份的日期赋值给这个属性就行。

示例代码：

组件类（TypeScript）

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 禁用日期的回调函数
  disablePastDates = (date: Date): boolean => {
    // 设置截止日期：5月15日（注意月份是0-based，所以5月用4表示）
    const cutoffDate = new Date(2024, 4, 15);
    return date <= cutoffDate;
  };

  // 控制日历默认显示的视图月份
  calendarViewDate: Date;

  constructor() {
    // 直接设置视图日期为5月1日
    this.calendarViewDate = new Date(2024, 4, 1);
  }
}

模板（HTML）

<p-calendar 
  [disabledDate]="disablePastDates"
  [viewDate]="calendarViewDate"
  placeholder="选择日期">
</p-calendar>

3. 动态适配任意截止日期（通用方案） #

如果你的截止日期是动态生成的（比如从后端接口获取），可以用下面的逻辑自动计算第一个可用月份：

// 假设cutoffDate是动态获取的禁用截止日期
const cutoffDate = new Date('2024-05-15');
const firstAvailableDate = new Date(cutoffDate);
// 取截止日期的下一天，也就是第一个可用日期
firstAvailableDate.setDate(cutoffDate.getDate() + 1);
// 将视图日期设置为第一个可用日期所在月份的第一天
this.calendarViewDate = new Date(firstAvailableDate.getFullYear(), firstAvailableDate.getMonth(), 1);

这种方式不管你的截止日期是某月的哪一天，都能自动定位到第一个有可用日期的月份。

原理说明 #

p-calendar默认会优先显示当前系统日期或者绑定的ngModel日期所在的月份，但当这个月份的日期全被禁用时，就需要我们通过viewDate手动指定初始视图。把viewDate设为第一个可用月份的日期后，日历打开时就会直接展示该月份，用户不用手动切换月份就能选择可用日期。

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