PrimeNG日历组件日期范围设置异常问题求助

问题现象 #

• 当设置minDate为12月2日至31日区间时，年份选择器中对应的最小年份会被完全禁用，即使该年份内存在符合条件的日期
• 当设置maxDate为1月1日至30日区间时，年份选择器中对应的最大年份也会被完全禁用，尽管该年份内有有效日期

问题截图 #

注：第二张截图中2023年份应处于启用状态

根因分析 #

PrimeNG日历组件的年份选择器默认逻辑是检查整个年份是否完全在minDate之前或maxDate之后，而非判断该年份内是否存在有效日期：

• 若minDate设为2023-12-02，组件会认为2023年所有日期都早于该值，从而禁用2023年
• 若maxDate设为2023-01-30，组件会认为2023年所有日期都晚于该值，从而禁用2023年

解决方案 #

1. 升级PrimeNG到最新稳定版

该问题已在PrimeNG 14.0及以上版本中修复，直接升级到最新版本是最简便的解决方式。

2. 自定义年份过滤函数

如果无法升级版本，可通过yearFilter属性自定义年份可用性判断逻辑：

// 组件内定义年份过滤函数
yearFilter = (year: number): boolean => {
  const min = new Date(this.minDate);
  const max = new Date(this.maxDate);
  
  // 检查当前年份是否存在至少一个日期在min和max范围内
  const yearStart = new Date(year, 0, 1);
  const yearEnd = new Date(year, 11, 31);
  
  return !(yearEnd < min || yearStart > max);
};

模板中使用该函数：

<p-calendar 
  [minDate]="minDate" 
  [maxDate]="maxDate" 
  [yearFilter]="yearFilter"
></p-calendar>

3. 临时调整日期范围（Workaround）

若需快速临时解决，可将minDate设为目标年份的1月1日，maxDate设为目标年份的12月31日，再通过额外逻辑限制具体日期区间，但此方法可能影响用户体验。

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