How to use angular2 built-in date pipe in services and directives script files

Question

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

Does anyone have ideas?

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

Solution 1

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());
}

Solution 2

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.

Comments

[Chen Dachao]

@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 stackoverflow.com/questions/36816548/… now, so please help to correct your tag.

[Chen Dachao]

Thanks very much @Alexander, it works for me, but I need to import DatePipe like thisimport { DatePipe } from '@angular/common/src/pipes'; otherwise webstorm will show an error.

[Chen Dachao]

Thanks Avnesh, I found the constructor of DatePipe is constructor(_locale: string), your suggestion missed a parameter, but anyway it inspired me a lot.

[Alexander Leonov]

@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.

[Chen Dachao]

my version:"@angular/common": "^2.3.0", webstorm: 2016.3.2

[Chimu]

Sample Code combining both answers new DatePipe('en-US').transform(myDate, 'yyyy-dd-MM');

[Ian Samz]

Please edit to add locale as @Chimu has shown

[Kapil Soni]

@Avnesh Shakya Lcan you tell me how to add "America/Los_Angeles" time in above function?

[Avnesh Shakya]

@KapilSoni see this if it helps: stackoverflow.com/questions/67731783/…

[Kapil Soni]

@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'});