PrimeNG p-calendar时间显示颠倒(时分互换)问题修复咨询
修复PrimeNG p-calendar时间显示小时分钟互换问题
这个问题是组件默认时间显示格式未明确指定,导致与预期的时/分顺序不符,直接通过以下方式修复:
- 修改组件代码,添加
timeFormat属性指定正确的时-分格式:
<p-calendar appendTo="body" [timeOnly]="true" formControlName="time" timeFormat="HH:mm"></p-calendar>
- 若需要12小时制带AM/PM标识的格式,可使用:
<p-calendar appendTo="body" [timeOnly]="true" formControlName="time" timeFormat="hh:mm tt"></p-calendar>
如果项目配置了PrimeNG本地化(Locale),需确保对应本地化配置中的时间格式与手动设置的格式一致,避免冲突。
核心原因:未显式指定timeFormat时,组件会根据默认本地化设置或浏览器环境自动推断格式,容易出现时/分顺序颠倒的情况,显式指定格式后即可强制按需求的顺序显示时间。
内容的提问来源于stack exchange,提问作者yaffi
相关产品推荐
相关产品推荐

