How to format an array of dates using datepipe in angular?

Question

I have an array of dates and it would be like

      [
        "2019-06-17 09:21:20+05:30",
        "2019-06-18 09:21:20+05:30",
        "2019-06-19 09:21:20+05:30",
        "2019-06-20 09:21:20+05:30"
      ]

how to convert this to date time using datepipe.

score 3 · Answer 1 · answered Jun 21 '19 at 04:35

3

import the DatePipe to your app.module file import { DatePipe} from '@angular/common'

and format your date objects using this Pre-defined format options

and include this code to your app.component.html page

{{ DateObjectValue | date:'medium'}}

see the attached stackblitz example link : FormatDateExample

answered Jun 21 '19 at 04:35

sureshkumar

184
8

i am doing this for chart purpose.so can this be converted in typescript itself.thats what i need. – minnu merin alex Jun 21 '19 at 04:47

score 0 · Answer 2 · answered Jun 21 '19 at 04:03

You can use pipe like this

TS file

export class AppComponent  {
  yourdate =   [
        "2019-06-17 09:21:20+05:30",
        "2019-06-18 09:21:20+05:30",
        "2019-06-19 09:21:20+05:30",
        "2019-06-20 09:21:20+05:30"
      ];
}

HTML file

<div *ngFor="let item of yourdate">
  {{item | date:'yyyy-MM-dd hh:mm'}}
</div>

https://stackblitz.com/edit/angular-date-pipe-array?file=src/app/app.component.html

score 0 · Answer 3 · edited Jun 21 '19 at 11:46

0

StackBliz is here https://stackblitz.com/edit/angular-bvpg4r

1) Import DatePipe:

import { DatePipe } from '@angular/common';

2) Include DatePipe in your module's providers:

NgModule({
  providers: [DatePipe]
})
export class AppModule {
}
or component's providers:

@Component({
  selector: 'home',
  styleUrls: ['./home.component.css'],
  templateUrl: './home.component.html',
  providers: [DatePipe]
})
export class HomeComponent {
...

3) Inject it into your component's constructor like any other service:

constructor(private datePipe: DatePipe) {
}

4) Use it:

ngOnInit() {
     data=this.datePipe.transform("2019-06-20 09:21:20+05:30", 'yyyy-dd-MM');
}

edited Jun 21 '19 at 11:46

piet.t

11,718
21
43
52

answered Jun 21 '19 at 04:05

HaSnen Tai

1,353
2
14
22

i need in typescript..to dispaly in chart.i was using datepipe.so how to use datepipe for array of dates. – minnu merin alex Jun 21 '19 at 04:44
@minnu Please Check the Edited code Hope this is what you are looking for – HaSnen Tai Jun 21 '19 at 05:03
i have an array of dates..do i need to loop the array ?or any other way – minnu merin alex Jun 21 '19 at 08:01
Yes of course loop the array and push your converted date into new array – HaSnen Tai Jun 21 '19 at 08:02

How to format an array of dates using datepipe in angular?

3 Answers3