My api response(services) is like this:
[
{
request_id: 260
meeting_time: "16:00"
service_name: "Life Insurance"
},
{
request_id: 261
meeting_time: "15:00"
service_name: "Car Insurance"
}
]
I want show the meeting_date
i,e(16:00) as 4PM(i,e 12 Hrs format).How can i do this?
I don’t want show this time in date/time picker, I just want to wrap it inside some <p>
tag like this:
<div *ngFor="let service of services">
<p>{{service.meeting_time}}<p>
</div>
you need create pipe
then i add this code in the HourPipe file
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'hour'
})
export class HourPipe implements PipeTransform {
transform(time: any): any {
let hour = (time.split(':'))[0]
let min = (time.split(':'))[1]
let part = hour > 12 ? 'PM' : 'AM';
min = (min + '').length == 1 ? `0${min}` : min;
hour = hour > 12 ? hour - 12 : hour;
hour = (hour + '').length == 1 ? `0${hour}` : hour;
return `${hour}:${min} ${part}`
}
}
after that in app.mdoule.ts file you have to add HourPipe under the declarations
and in .html file
it will be like this
{{ '16:00' | hour }} // this return 04:00PM
Or you could just stand on the shoulders of giants :
format(parse(time, "HH:mm", new Date()), "h:mma");
Incidentally,
crmontiel:
HourPipe
If you’re using that pipe in production, beware that it treats noon as midnight.
You are absolutely right, I thought about it when I wrote it to share it, I will take into account what you say and improve this for the pipe