javascript - Hur ställer man in lokal i DatePipe i Angular 2?

Jag vill visa datum med europeiskt format dd/MM/yyyy men när jag använder DatePipe shortDate-formatet visas det bara med amerikanskt datumformat MM/dd/yyyy.
Jag antar att standardlokalen är en_US. Kanske har jag missat det i dokumentationen, men hur kan jag ändra standardlokalinställningarna i en Angular2-app? Eller finns det kanske ett sätt att skicka ett anpassat format till DatePipe?

Svar #1

Från och med Angular2 RC6 kan du ställa in standardlokal i din appmodul genom att lägga till en tillhandahållare:

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

Valuta-/Datum-/Nummerpipor bör plocka upp lokalinställningen. LOCALE_ID är en OpaqueToken, som ska importeras från angular/core.

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

För ett mer avancerat användningsfall kan du vilja hämta lokal från en tjänst. Lokal kommer att lösas (en gång) när komponenten som använder datumrör skapas:

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

Hoppas det fungerar för dig.

Svar #2

Lösning med LOCALE_ID är bra om du vill ange språket för din app en gång. Men det fungerar inte om du vill ändra språket under körning. För detta fall kan du implementera en egen datum-pipe.

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

}

Nu, om du ändrar appens visningsspråk med hjälp av TranslateService (se ngx-translate)

this.translateService.use('en');

formaten inom din app bör automatiskt uppdateras.

Exempel på användning:

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

eller kolla in mitt enkla "Notes"-projekt här.

Svar #3

Med angular5 fungerar inte längre svaret ovan!

Följande kod:

app.module.ts

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

Leder till följande fel:

Fel: Saknas lokaldat för lokal "de-at".

Med angular5 måste du själv ladda och registrera den använda lokalfilen.

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...
  ]
})

Dokumentation

Svar #4

Om du använder TranslateService från @ngx-translate/core, är nedan en version utan att skapa ett nytt pipe som fungerar med dynamisk byte vid körning (testad på Angular 7). Användning av DatePipe's locale parameter (dokumentation):

Först, deklarera de lokaler du använder i din app, t.ex. i 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');
}

Använd sedan ditt rör på ett dynamiskt sätt:

myComponent.component.html

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

myComponent.component.ts

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

Svar #5

I app.module.ts lägg till följande importeringar. Det finns en lista över LOCALE-alternativ här.

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

Lägg sedan till leverantören

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

Använd pipes i HTML. Här är Angular-dokumentationen för detta.

{{ dateObject | date: 'medium' }}

Svar #6

Jag har tittat i date_pipe.ts och den har två bitar av information som är intressanta. Nära toppen finns följande två rader:

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

Nära botten finns denna rad:

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

Detta antyder för mig att datumfiltret för närvarande är hårdkodat till 'en-US'.

Var snäll och upplys mig om jag har fel.

Relaterade artiklar