Come impostare la locale in DatePipe in Angular 2?

Voglio visualizzare la data utilizzando il formato europeo dd/mm/yyyy ma utilizzando il formato DateData shortDate viene visualizzato solo utilizzando lo stile data americano mm/dd/yyyy .
Suppongo che questo sia il locale predefinito en_US. Forse mi mancano i documenti, 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, puoi impostare le impostazioni locali 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 Currency / Date / Number dovrebbero raccogliere le impostazioni locali. LOCALE_ID è un OpaqueToken , da importare da angular / core.

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

Per un caso d’uso più avanzato, è ansible selezionare le impostazioni internazionali da un servizio. Le impostazioni locali verranno risolte (una sola volta) quando viene creato il componente che utilizza la pipe della 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 è ansible implementare un tubo di data personalizzato.

 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 della tua app dovrebbero essere aggiornati automaticamente.

Esempio di utilizzo:

 

{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}

{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}

o controlla qui il mio semplice progetto “Note”.

inserisci la descrizione dell'immagine qui

Con angular5 la 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 angular5 devi 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 lcoaleDeAt from '@angular/common/locales/de-at'; registerLocaleData(lcoaleDeAt); @NgModule({ providers: [ { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale //otherProviders... ] }) 

Documentazione

Ho dato un’occhiata in date_pipe.ts e ha due bit di informazioni che sono di interesse. 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'; 

Vicino al fondo c’è questa linea:

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

Questo mi suggerisce che il pipe della data è attualmente codificato per essere “en-US”.

Per favore mi illumini se sbaglio.

Fai qualcosa del genere:

{{ dateObj | date:'shortDate' }}

o

{{ dateObj | date:'ddmmy' }}

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

Stavo lottando con lo stesso problema e non ha 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 un pipe personalizzato.

Per coloro che hanno problemi con AOT, devi farlo un po ‘diversamente con un useFactory:

 export function getCulture() { return 'fr-CA'; } @NgModule({ providers: [ { provide: LOCALE_ID, useFactory: getCulture }, //otherProviders... ] }) 

Copiato il tubo di google ha cambiato il locale e funziona per il mio paese è ansible che non lo hanno finito per tutti i 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 = 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); } } 

Questo potrebbe essere un po ‘in ritardo, ma nel mio caso (angular 6), ho creato una semplice pipa su DatePipe, qualcosa del genere:

 private _regionSub: Subscription; private _localeId: string; constructor(private _datePipe: DatePipe, private _store: Store) { 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 funziona.