49

I want to use angular2's date pipe in services and directives script files(not only in HTML).

Does anyone have any ideas?

Can't upload code cos some policy restrictions, sorry about that.

Chen Dachao
  • 1,736
  • 2
  • 21
  • 36
  • 1
    @Community, what I want ask is how to use angular2 date pipe in services and directives not only in component which is different with question https://stackoverflow.com/questions/36816548/how-to-use-a-pipe-in-a-component-in-angular-2 now, so please help to correct your tag. – Chen Dachao May 30 '17 at 08:11

2 Answers2

98

Since CommonModule does not export it as a provider you'll have to do it yourself. This is not very complicated.

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() {
    this.time = this.datePipe.transform(new Date());
}
Alexander Leonov
  • 4,694
  • 1
  • 17
  • 25
  • 1
    Thanks very much @Alexander, it works for me, but I need to import DatePipe like this`import { DatePipe } from '@angular/common/src/pipes';` otherwise webstorm will show an error. – Chen Dachao Dec 23 '16 at 01:51
  • @LarryChen, this just means that there's something else wrong with your setup, mine does understand it. May be you're using old version of ng2 or WebStorm. – Alexander Leonov Dec 23 '16 at 14:46
  • 1
    my version:`"@angular/common": "^2.3.0"`, webstorm: 2016.3.2 – Chen Dachao Dec 25 '16 at 09:01
33

In your component

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

If you are using Angular 2, 4 version, try

new DatePipe().transform(myDate, 'yyyy-dd-MM');

If you are using Angular 6 and above

new DatePipe('en-US').transform(myDate, 'yyyy-dd-MM');

Hope this will help.

Vincent Doba
  • 4,343
  • 3
  • 22
  • 42
Avnesh Shakya
  • 3,828
  • 2
  • 23
  • 31
  • Thanks Avnesh, I found the constructor of DatePipe is `constructor(_locale: string)`, your suggestion missed a parameter, but anyway it inspired me a lot. – Chen Dachao Dec 23 '16 at 01:54
  • 8
    Sample Code combining both answers `new DatePipe('en-US').transform(myDate, 'yyyy-dd-MM');` – Chimu Jun 06 '17 at 07:13
  • Please edit to add locale as @Chimu has shown – Ian Samz Sep 10 '19 at 13:30
  • @Avnesh Shakya Lcan you tell me how to add "America/Los_Angeles" time in above function? – Kapil Soni Nov 25 '21 at 08:22
  • @KapilSoni see this if it helps: https://stackoverflow.com/questions/67731783/angular-date-pipe-with-time-zone-information-like-america-edmonton – Avnesh Shakya Nov 25 '21 at 09:26
  • @AvneshShakya sir i have tried code but its give ne different time const text = new Date(this.salesOrderModel.PostingDate).toLocaleString('en-US', { timeZone:'America/Los_Angeles'}); – Kapil Soni Nov 25 '21 at 09:29