CODEWITHSUNDEEP
angularprimeng
Harish
Harish

Reputation: 1273

How to retrieve only time from prime ng date picker

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?

Upvotes: 4

Views: 11649

Answers (3)

Akitha_MJ
Akitha_MJ

Reputation: 4294

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

dataType="string"

by this time will be get as string like this 14:24

Upvotes: 3

Michael Kang
Michael Kang

Reputation: 52867

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

Upvotes: 10

dansasu11
dansasu11

Reputation: 913

default dataType is Date but you can change it to string and you will be fine

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

Upvotes: 9

Related Questions