CODEWITHSUNDEEP
javascriptangular6
juhi
juhi

Reputation: 578

Time converting pipe for angular

I want the time stamp to be converted in HTML when i render it using angular object I have an object where i get start and end time as 09:15:00 and 13:20:45 i want to convert them to 09:15 am and 13:20 pm using pipe in html

<div>{{start_time}} {{end_time}}</div>

09:15:00 13:20:45

how can i achieve that using angular pipe because i cannot use date pipe here as that only works if we have date in the object how can i achieve that using angular pipe because i cannot use date pipe here as that only works if we have date in the object

Can anyone help...

Upvotes: 0

Views: 2392

Answers (3)

Jeba
Jeba

Reputation: 868

import * as moment from 'moment';

@Pipe({
  name: 'customTimePipe'
})
export class CustomTimePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return moment(value,'HH:mm').format("HH:mm A");
  }
}

This is Pipe file

hereafter you have to use like this in HTML

<div>{{start_time | customTimePipe}} {{end_time | customTimePipe}}</div>

Hope this will solve you problem.

Upvotes: 2

Shivendra Singh
Shivendra Singh

Reputation: 3006

You can create custom 'time converting' pipe.

import { Pipe, PipeTransform } from '@angular/core';
import moment = require('moment');
@Pipe({name: 'datepipe'})
export class datepipe implements PipeTransform{

    transform(value:any, args:any){

        return moment(value,'HH:mm').format("HH:mm A");

    }

}

and use this pipe at the time of display.

{{start_time | datepipe}}  {{end_time | datepipe}}

DEMO

Upvotes: 1

Anton Skybun
Anton Skybun

Reputation: 1649

Can you try to convert your timestamp to date as 

new Date(timestamp)

and then try to use data PIPE

Upvotes: 0

Related Questions