In AngularJS, sono in grado di utilizzare filtri (pipe) all'interno di servizi e controller utilizzando una sintassi simile a questa:

$filter('date')(myDate, 'yyyy-MM-dd');

È possibile utilizzare tubi in servizi / componenti come questo in Angolare?

Come al solito in Angular, puoi fare affidamento sull'iniezione di dipendenza:

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

class MyService {

  constructor(private datePipe: DatePipe) {}

  transformDate(date) {
    return this.datePipe.transform(date, 'yyyy-MM-dd');
  }
}

Aggiungi DatePipealla tua lista dei fornitori nel tuo modulo; se ti dimentichi di farlo, otterrai un errore no provider for DatePipe:

providers: [DatePipe,...]

Aggiorna Angular 6 : Angular 6 ora offre praticamente tutte le funzioni di formattazione utilizzate dalle pipe pubblicamente. Ad esempio, ora è possibile utilizzare formatDatedirettamente la funzione.

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

class MyService {

  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, 'yyyy-MM-dd', this.locale);
  }
}

Prima di Angular 5 : tieni presente però che DatePipesi basava sull'API Intl fino alla versione 5, che non è supportata da tutti i browser (controlla la tabella di compatibilità ).

Se si utilizzano versioni angolari precedenti, è necessario aggiungere il Intlpolyfill al progetto per evitare qualsiasi problema. Vedi questa domanda correlata per una risposta più dettagliata.

Questa risposta è ora obsoleta

consiglia di utilizzare l'approccio DI da altre risposte anziché questo approccio

Risposta originale:

Dovresti essere in grado di utilizzare direttamente la classe

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

Per esempio

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

Sì, è possibile utilizzando una semplice pipe personalizzata. Il vantaggio di utilizzare la pipe personalizzata è se in futuro avremo bisogno di aggiornare il formato della data, possiamo andare e aggiornare un singolo file.

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

Puoi sempre usare questa pipa ovunque, componente, servizi ecc

Per esempio

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

Non dimenticare di importare dipendenze.

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

Esempi di tubi personalizzati e maggiori informazioni

Altre risposte non funzionano in Angular 5?

Ho ricevuto un errore perché DatePipe non è un provider, quindi non può essere iniettato. Una soluzione è inserirla come provider nel modulo dell'app, ma la mia soluzione preferita è stata istanziarla.

Crea un'istanza dove necessario:

Ho guardato il codice sorgente di DatePipe per vedere come ha ottenuto la localizzazione: https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174

Volevo usarlo all'interno di una pipe, quindi il mio esempio è all'interno di un'altra pipe:

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 chiave qui è importare Inject e LOCALE_ID dal core di angular, quindi iniettarlo in modo da poterlo dare al DatePipe per istanziarlo correttamente.

Trasforma DatePipe in un provider

Nel modulo dell'app puoi anche aggiungere DatePipe all'array dei tuoi provider in questo modo:

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

@NgModule({
    providers: [
        DatePipe
    ]
})

Ora puoi semplicemente iniettarlo nel tuo costruttore dove necessario (come nella risposta di cexbrayat).

Sommario:

Entrambe le soluzioni hanno funzionato, non so quale angolare considererebbe la maggior parte "corretta", ma ho scelto di crearne un'istanza manualmente poiché angular non ha fornito datepipe come provider stesso.

Se non vuoi fare 'new myPipe ()' perché stai iniettando dipendenze su pipe, puoi iniettare componenti come provider e utilizzarli senza nuovi.

Esempio:

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

Se si desidera utilizzare la pipa personalizzata nei componenti, è possibile aggiungere

@Injectable({
  providedIn: 'root'
})

annotazione per la tua pipe personalizzata. Quindi, puoi usarlo come servizio

A partire da Angular 6 è possibile importare formatDateda@angular/common utility da utilizzare all'interno dei componenti.

È stato introdotto su https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae

Posso essere usato come:

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

Sebbene sia necessario fornire le impostazioni internazionali

È possibile utilizzare formatDate () per formattare la data in servizi o componenti ts. sintassi:-

formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string

importa il formatDate () dal modulo comune in questo modo,

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

e usalo in classe come questo,

formatDate(new Date(), 'MMMM dd yyyy', 'en');

Puoi anche utilizzare le opzioni di formato predefinite fornite da Angular in questo modo,

formatDate(new Date(), 'shortDate', 'en');

Puoi vedere tutte le altre opzioni di formato predefinite qui,

https://angular.io/api/common/DatePipe