Come impostare le impostazioni internazionali in DatePipe in Angular 2?

Voglio visualizzare la data usando il formato europeo, dd/MM/yyyyma usando il formato DatePipe shortDate viene visualizzato solo usando lo stile della data USA MM/dd/yyyy.
Suppongo che l'impostazione internazionale predefinita sia en_US. Forse mi manca la documentazione, ma come posso modificare le impostazioni internazionali predefinite in un'app Angular2? O forse c'è un modo per passare un formato personalizzato a DatePipe?

A partire da Angular2 RC6, è possibile impostare le impostazioni internazionali predefinite nel modulo dell'app, aggiungendo un provider:

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale
    //otherProviders...
  ]
})

Le pipe Valuta / Data / Numero dovrebbero selezionare le impostazioni internazionali. LOCALE_ID è un OpaqueToken , da importare da angolare / centrale.

import { LOCALE_ID } from '@angular/core';

Per un caso d'uso più avanzato, potresti voler ritirare le impostazioni locali da un servizio. Le impostazioni internazionali verranno risolte (una volta) quando viene creato il componente che utilizza la pipe di data:

{
  provide: LOCALE_ID,
  deps: [SettingsService],      //some service handling global settings
  useFactory: (settingsService) => settingsService.getLanguage()  //returns locale string
}

Spero che funzioni per te.

La soluzione con LOCALE_ID è ottima se vuoi impostare la lingua per la tua app una volta. Ma non funziona, se vuoi cambiare la lingua durante il runtime. In questo caso è possibile implementare la pipe della data personalizzata.

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
  }

  transform(value: any, pattern: string = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }

}

Ora se cambi la lingua di visualizzazione dell'app usando TranslateService (vedi ngx-translate )

this.translateService.use('en');

i formati all'interno dell'app dovrebbero essere aggiornati automaticamente.

Esempio di utilizzo:

<p>{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}</p>
<p>{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}</p>

o controllare le mie semplici "Note" del progetto qui .

Con angular5la risposta sopra non funziona più!

Il seguente codice:

app.module.ts

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

Porta al seguente errore:

Errore: dati locali mancanti per la locale "de-at".

Con angular5devi caricare e registrare il file locale usato da solo.

app.module.ts

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDeAt from '@angular/common/locales/de-at';

registerLocaleData(localeDeAt);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

Documentazione

Se usi TranslateServiceda @ngx-translate/core, di seguito è una versione senza creare una nuova pipe che funziona con la commutazione dinamica in fase di esecuzione (testata su Angular 7). Usando il localeparametro ( documenti ) di DatePipe :

Per prima cosa, dichiara le impostazioni locali che usi nella tua app, ad esempio in app.component.ts:

import localeIt from '@angular/common/locales/it';
import localeEnGb from '@angular/common/locales/en-GB';
.
.
.
ngOnInit() {
    registerLocaleData(localeIt, 'it-IT');
    registerLocaleData(localeEnGb, 'en-GB');
}

Quindi, utilizza la pipa in modo dinamico:

myComponent.component.html

<span>{{ dueDate | date: 'shortDate' : '' : translateService.currentLang }}</span>

myComponent.component.ts

 constructor(public translateService: TranslateService) { ... }

Ho dato un'occhiata a date_pipe.ts e ha due bit di informazioni che sono interessanti. vicino alla cima ci sono le seguenti due linee:

// TODO: move to a global configurable location along with other i18n components.
var defaultLocale: string = 'en-US';

In fondo c'è questa linea:

return DateFormatter.format(value, defaultLocale, pattern);

Questo mi suggerisce che la data pipe sia attualmente codificata per essere "en-US".

Per favore, illuminami se sbaglio.

Su app.module.ts aggiungi le seguenti importazioni. C'è un elenco di opzioni LOCALE qui .

import es from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(es);

Quindi aggiungere il provider

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "es-ES" }, //your locale
  ]
})

Usa le pipe in html. Ecco la documentazione angolare per questo.

{{ dateObject | date: 'medium' }}

Fai qualcosa del genere:

{{ dateObj | date:'shortDate' }}

o

{{ dateObj | date:'ddmmy' }}

Vedi: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Ero alle prese con lo stesso problema e non ho funzionato per me usando questo

{{dateObj | date:'ydM'}}

Quindi, ho provato una soluzione alternativa, non la soluzione migliore ma ha funzionato:

{{dateObj | date:'d'}}/{{dateObj | date:'M'}}/{{dateObj | date:'y'}}

Posso sempre creare una pipe personalizzata.

Per coloro che hanno problemi con AOT, è necessario farlo in modo leggermente diverso con un useFactory:

export function getCulture() {
    return 'fr-CA';
}

@NgModule({
  providers: [
    { provide: LOCALE_ID, useFactory: getCulture },
    //otherProviders...
  ]
})

Copiato il pipe di Google ha cambiato le impostazioni locali e funziona per il mio paese, è possibile che non lo abbiano finito per tutte le versioni locali. Di seguito è riportato il codice.

import {
    isDate,
    isNumber,
    isPresent,
    Date,
    DateWrapper,
    CONST,
    isBlank,
    FunctionWrapper
} from 'angular2/src/facade/lang';
import {DateFormatter} from 'angular2/src/facade/intl';
import {PipeTransform, WrappedValue, Pipe, Injectable} from 'angular2/core';
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';


var defaultLocale: string = 'hr';

@CONST()
@Pipe({ name: 'mydate', pure: true })
@Injectable()
export class DatetimeTempPipe implements PipeTransform {
    /** @internal */
    static _ALIASES: { [key: string]: String } = {
        'medium': 'yMMMdjms',
        'short': 'yMdjm',
        'fullDate': 'yMMMMEEEEd',
        'longDate': 'yMMMMd',
        'mediumDate': 'yMMMd',
        'shortDate': 'yMd',
        'mediumTime': 'jms',
        'shortTime': 'jm'
    };


    transform(value: any, args: any[]): string {
        if (isBlank(value)) return null;

        if (!this.supports(value)) {
            console.log("DOES NOT SUPPORT THIS DUEYE ERROR");
        }

        var pattern: string = isPresent(args) && args.length > 0 ? args[0] : 'mediumDate';
        if (isNumber(value)) {
            value = DateWrapper.fromMillis(value);
        }
        if (StringMapWrapper.contains(DatetimeTempPipe._ALIASES, pattern)) {
            pattern = <string>StringMapWrapper.get(DatetimeTempPipe._ALIASES, pattern);
        }
        return DateFormatter.format(value, defaultLocale, pattern);
    }

    supports(obj: any): boolean { return isDate(obj) || isNumber(obj); }
}

Ok, propongo questa soluzione, molto semplice, usando ngx-translate

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
}

  transform(value: any): any {
    const date = new Date(value);

    const options = { weekday: 'long',
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                  second: '2-digit'
                    };

    return date.toLocaleString(this.translateService.currentLang, options);
  }

}

Potrebbe essere un po 'tardi, ma nel mio caso (angolare 6), ho creato una semplice pipe in cima a DatePipe, qualcosa del genere:

private _regionSub: Subscription;
private _localeId: string;

constructor(private _datePipe: DatePipe, private _store: Store<any>) {
  this._localeId = 'en-AU';
  this._regionSub = this._store.pipe(select(selectLocaleId))
    .subscribe((localeId: string) => {
      this._localeId = localeId || 'en-AU';
    });
}

ngOnDestroy() { // Unsubscribe }

transform(value: string | number, format?: string): string {
  const dateFormat = format || getLocaleDateFormat(this._localeId, FormatWidth.Short);
  return this._datePipe.transform(value, dateFormat, undefined, this._localeId);
}

Potrebbe non essere la soluzione migliore, ma semplice e funzionante.