cette réponse est maintenant périmée

recommander L'utilisation de L'approche DI

vous devez être en mesure d'utiliser la classe directement

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

par exemple

var raw = new Date(2015, 1, 12);
var formatted = new DatePipe().transform(raw, 'yyyy-MM-dd');
expect(formatted).toEqual('2015-02-12');

Oui il est possible en utilisant un tuyau personnalisé simple. L'avantage d'utiliser le tuyau personnalisé est si nous avons besoin de mettre à jour le format de date à l'avenir, aller et mettre à jour un seul fichier.

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

@Pipe({
    name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'MMM-dd-yyyy');
        return value;
    }
}

{{currentDate | dateFormatPipe }}

vous pouvez toujours utiliser ce tuyau n'importe où, composant, services etc""

par exemple

export class AppComponent {
  currentDate : any;
  newDate : any;
  constructor(){
    this.currentDate = new Date().getTime();
    let dateFormatPipeFilter = new dateFormatPipe();
    this.newDate = dateFormatPipeFilter.transform(this.currentDate);
    console.log(this.newDate);
}

N'oubliez pas d'importer les dépendances.

import { Component } from '@angular/core';
import {dateFormatPipe} from './pipes'

Personnalisé Pipe exemples et plus d'info

autres réponses ne fonctionne pas en angle 5?

j'ai eu une erreur parce que DatePipe n'est pas un fournisseur, il ne peut donc pas être injecté. Une solution est de le mettre comme un fournisseur dans votre module app, mais ma solution préférée était de l'instancier.

l'Instancier en cas de besoin:

j'ai regardé le code source de DatePipe pour voir comment il a obtenu la localisation: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

je voulais l'utiliser dans un tuyau, donc mon exemple est dans un autre tuyau:

import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'when',
})
export class WhenPipe implements PipeTransform {
    static today = new Date((new Date).toDateString().split(' ').slice(1).join(' '));
    datePipe: DatePipe;

    constructor(@Inject(LOCALE_ID) private locale: string) {
        this.datePipe = new DatePipe(locale);
    }
    transform(value: string | Date): string {
        if (typeof(value) === 'string')
            value = new Date(value);

        return this.datePipe.transform(value, value < WhenPipe.today ? 'MMM d': 'shortTime')
    }
}

la clé ici est d'importer injecter, et LOCALE_ID à partir du noyau d'angular, puis de l'injecter pour que vous puissiez le donner au Datapipe pour l'instancier correctement.

Faire DatePipe un fournisseur de

dans votre application module vous pouvez aussi ajouter Datapipe à votre tableau de fournisseurs comme ceci:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

Maintenant vous pouvez simplement l'injecter dans votre constructeur si nécessaire (comme dans la réponse de cexbrayat).

résumé:

L'une ou l'autre solution a fonctionné, Je ne sais pas quelle angulaire considérerait la plus" correcte " mais j'ai choisi de l'instancier manuellement car angular n'a pas fourni le réseau de données comme un fournisseur lui-même.

à partir de L'angle 6, Vous pouvez importer formatDate de @angular/common utilitaire à utiliser à l'intérieur des composants.

il a été introduit à https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

je peux être utilisé comme:

import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');

bien que le local doive être fourni

si vous ne voulez pas faire 'new myPipe()' parce que vous injectez des dépendances à pipe, vous pouvez injecter dans le composant comme provider et utiliser sans Nouveau.

exemple:

// In your component...

import { Component, OnInit } from '@angular/core';
import { myPipe} from './pipes';

@Component({
  selector: 'my-component',
  template: '{{ data }}',
  providers: [ myPipe ]
})
export class MyComponent() implements OnInit {
  data = 'some data';
  constructor(private myPipe: myPipe) {}

  ngOnInit() {
    this.data = this.myPipe.transform(this.data);
  }
}