PrimeNg Calendar：允许选择当前月显示的下月未来日期

核心配置方案 #

PrimeNG Calendar默认会显示当前月份视图里的上月/下月日期，但默认不可选中。要开启下月日期的选中权限，只需设置selectOtherMonths属性为true：

<p-calendar 
  [(ngModel)]="selectedDate"
  [selectOtherMonths]="true"
></p-calendar>

注：showOtherMonths属性默认值为true，负责显示其他月份的日期，无需额外设置；如果之前手动设为false，需要改回true才能看到下月日期。

精细控制可选范围（仅允许下月日期） #

如果需要限制只能选中当前视图里的下月日期，而禁用上月的日期，可以通过disabledDate自定义函数来实现：

1. 在组件类中定义禁用规则：

disabledDate(date: Date): boolean {
  const today = new Date();
  const currentMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
  
  // 禁用早于当前月份的日期，允许当前月和下月显示的日期
  return date < currentMonthStart;
}

2. 在模板中绑定该函数：

<p-calendar 
  [(ngModel)]="selectedDate"
  [selectOtherMonths]="true"
  [disabledDate]="disabledDate"
></p-calendar>

自定义选中样式（可选） #

默认情况下，其他月份的选中日期样式较淡，可通过自定义CSS增强视觉效果：

/* 自定义下月选中日期的背景色和文字色 */
.p-calendar .p-datepicker-calendar .p-datepicker-other-month.p-highlight {
  background-color: #007ad9;
  color: #ffffff;
  border-color: #007ad9;
}

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