You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

PrimeNG年份选择器(Year Picker)按官方文档配置后不显示年份求助

问题原因

你当前的配置缺少2个必要项,导致组件无法正常渲染可选年份列表:

  • 未显式开启年份选择器模式,仅设置view="year"只是默认打开年份视图,并未限制选择维度为年份
  • 未配置可选年份范围,组件默认年份范围计算异常,无法渲染可选项
修正后的完整代码
<p-calendar
  #calendar
  inputId="year"
  [(ngModel)]="date1"
  view="year"
  dateFormat="yy"
  yearPicker="true"
  yearRange="1990:2030"
  [readonlyInput]="true"
  (onYearSelect)="calendar.close()">
</p-calendar>
配置说明
  • yearPicker="true":声明组件为仅年份选择模式,禁止切换到月、日选择视图
  • yearRange:格式为起始年:结束年,可根据业务需求自行调整可选年份范围
  • [readonlyInput]="true":禁止用户手动输入内容,避免出现非规范格式的日期值
  • (onYearSelect)="calendar.close()":选中年份后自动关闭选择面板,优化交互体验

内容的提问来源于stack exchange,提问作者Itharius

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.23 21:24:00