Format time in Typescript Angular

Question

I want to iterate time in my FormArray and I'm receiving time from API in the below format:

14.21.00

I want to format this time like this:

2:21 PM

I'm trying to format using Angular DatePipe like this:

{{summon.value.summonTime | date :'shortTime' }}

but got error:

Error: InvalidPipeArgument: 'Unable to convert "14.21.00" into a date' for pipe 'DatePipe'

here I reproduced in stackblitz

based on my research, 14.21.00 are not supported time format in javascript/typescript, if there any guidance and suggestion to solve this.

if its only to display formatted, you can do this: {{summon.value.summonTime.split('.').join(':')}} — Leonardo Getulio
– Leonardo Getulio, Commented Sep 11, 2019 at 15:53

Leonardo Getulio · Accepted Answer · 2019-09-14 12:48:51Z

1

Try this (tested on your stackblitz code):

time:{{'1990-10-10 '+ summon.value.summonTime.split('.').join(':') | date:'shortTime' }}

To use the "date" pipe, time must follow a date too, so we can pass any date just to validate the date pipe. For example, this works: {{'1990-10-10 01:02:03' | date:'shortTime'}}, and this does not works: {{'01:02:03' | date:'shortTime'}}.

Also I have replaced the "." (dots) on time with ":" with split and join to take formatted as needed.

edited Sep 14, 2019 at 12:48

answered Sep 11, 2019 at 16:10

Leonardo Getulio

3101 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hafizi hamid Over a year ago

hi mate, it seems work, any explanation for you answer ?

Leonardo Getulio Over a year ago

Yes, I have editted the answer with explanation. Good vibes.

Santhosh John · Accepted Answer · 2019-09-11 16:03:17Z

Hope You're doing great!!!

Create a New Pipe in the folder you wish. Once done, please provide details in the module (import and declaration): -

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'dateTransformer'
})
export class DateTransformerPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value && value.length > 0 ? value.replace('.', ':') : value;
  }
}

Once done, update this in your snippet: -

<ng-container [formGroupName]="i">
  <input type="checkbox" formControlName="isChecked" />
  {{ summon.value.summonTime | dateTransformer }}
  item: {{ summon.value.itemNo }}
  <br />
  time:{{ summon.value.summonTime | dateTransformer }}
  <br />
</ng-container>

Hope, I was able to resolve your query! Happy Coding!! Cheers!!!

Reza · Accepted Answer · 2019-09-11 16:08:26Z

0

You can use ngx-moment as below

{{summon.value.summonTime | amParse:'HH.mm.ss' | amDateFormat:'hh:mm a'}}

see your modified stackblitz https://stackblitz.com/edit/angular-moment-pipe-2324234

edited Sep 11, 2019 at 16:08

answered Sep 11, 2019 at 16:06

Reza

20.1k18 gold badges102 silver badges176 bronze badges

2 Comments

hafizi hamid Over a year ago

thanks, but if there any way without angular library ?

Reza Over a year ago

you can develop you own pipe, reading values separate by . and convert 24 hrs to 12 hours, and add am/pm

Collectives™ on Stack Overflow

Format time in Typescript Angular

3 Answers 3

2 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Related