CODEWITHSUNDEEP
javascriptangulartypescripttimedate-pipe
hafizi hamid
hafizi hamid

Reputation: 411

Format time in Typescript Angular

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.

Upvotes: 2

Views: 3545

Answers (3)

Leonardo Getulio
Leonardo Getulio

Reputation: 310

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.

Upvotes: 1

Reza
Reza

Reputation: 19933

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

Upvotes: 0

Santhosh John
Santhosh John

Reputation: 728

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!!!

Upvotes: 0

Related Questions