如何从PrimeNG日期选择器（timeOnly模式）中仅提取时间值

刚好我之前也遇到过这个问题，给你几个实用的解决方案，帮你轻松获取仅时间部分：

方法1：直接让组件返回时间字符串（最省心的方式） #

PrimeNG的p-calendar其实自带了控制返回值格式的属性，搭配timeOnly="true"使用就能直接得到你想要的时间字符串：

<p-calendar 
  [(ngModel)]="classTimingsArray[i].start_time" 
  timeOnly="true"
  dataType="string"
  dateFormat="HH:mm"
></p-calendar>

这里的关键参数：

• dataType="string"：把组件返回的类型从默认的Date对象改成字符串
• dateFormat="HH:mm"：指定时间的格式，你可以按需调整：
  • HH:mm:ss：带秒数的24小时制（比如02:00:00）
  • hh:mm a：12小时制带上午/下午标识（比如02:00 AM）

设置完之后，classTimingsArray[i].start_time就会直接存储纯时间字符串，完全符合你的需求。

方法2：从Date对象手动提取时间（适合需要保留Date对象的场景） #

如果你因为后续要做时间计算等需求，必须保留Date对象，那可以在组件里写个简单的工具方法来提取时间：

getOnlyTime(date: Date): string {
  if (!date) return '';
  // 补零保证两位数格式
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  // 需要秒数的话就加这行
  // const seconds = date.getSeconds().toString().padStart(2, '0');
  return `${hours}:${minutes}`;
}

之后在需要用时间的地方调用这个方法就行，比如提交表单时：

submitForm() {
  const pureTime = this.getOnlyTime(this.classTimingsArray[i].start_time);
  // 把pureTime传给后端或者做其他处理
}

方法3：用Angular管道展示时间（仅用于前端显示） #

如果只是在页面上需要展示纯时间，不需要修改绑定的Date对象，用Angular内置的DatePipe就很方便：

<!-- 在模板中显示仅时间部分 -->
<div>开始时间：{{ classTimingsArray[i].start_time | date:'HH:mm' }}</div>

要是想在组件类里使用这个管道，记得先在组件的providers里注入DatePipe哦。

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