How to retrieve only time from prime ng date picker

Question

I'm using datetime picker in primeng to show only the time picker

Here's the code that I have written :

<p-calendar [(ngModel)]="classTimingsArray[i].start_time" timeOnly="true"></p-calendar>

As I have given timeOnly = true, I'm only getting timepicker which is what I want

But the value inside the ngModel is complete date along with the time (Wed Jan 17 2018 02:00:00 GMT+0530 (India Standard Time))

I only want the time to be retrieved

How should I do that?

Answer 1

You can handle the onSelect event in your template:

<p-calendar (onSelect)="onSelect($event)"
  [(ngModel)]="classTimingsArray[i].start_time" timeOnly="true">
</p-calendar>

From your component:

timeValue: string;

onSelect($event) {
  let hour = new Date($event).getHours();
  let min = new Date($event).getMinutes();
  if(min < 10) { 
     this.timeValue= `${hour}:0${min}`;
  } else {
     this.timeValue= `${hour}:${min}`;
  } 
}

Demo: https://stackblitz.com/edit/prime-ng-calendar-e8lrz1?file=app%2Fcalendar%2Fcalendar.component.ts