Jak ustawić ustawienia regionalne w DatePipe w Angular 2?

Chcę wyświetlić datę w formacie europejskim, dd/MM/yyyyale używając formatu DatePipe shortDate , wyświetla się tylko w amerykańskim stylu daty MM/dd/yyyy.
Zakładam, że domyślne ustawienie regionalne to en_US. Może brakuje mi dokumentów, ale jak mogę zmienić domyślne ustawienia regionalne w aplikacji Angular2? A może jest jakiś sposób na przekazanie niestandardowego formatu do DatePipe?

Począwszy od Angular2 RC6, możesz ustawić domyślne ustawienia regionalne w module aplikacji, dodając dostawcę:

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

Rury Waluta / Data / Liczba powinny uwzględniać ustawienia regionalne. LOCALE_ID jest nieprzezroczystym tokenem , który ma zostać zaimportowany z angular / core.

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

W przypadku bardziej zaawansowanego przypadku możesz chcieć pobrać lokalizację z usługi. Ustawienia regionalne zostaną rozwiązane (raz) po utworzeniu komponentu używającego potoku daty:

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

Mam nadzieję, że to działa dla Ciebie.

Rozwiązanie z LOCALE_ID jest świetne, jeśli chcesz raz ustawić język dla swojej aplikacji. Ale to nie działa, jeśli chcesz zmienić język w czasie wykonywania. W tym przypadku możesz zaimplementować niestandardowy potok daty.

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

}

Teraz, jeśli zmienisz język wyświetlania aplikacji za pomocą TranslateService (zobacz ngx-translate )

this.translateService.use('en');

formaty w Twojej aplikacji powinny być aktualizowane automatycznie.

Przykład użycia:

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

lub sprawdź mój prosty projekt „Notatki” tutaj .

Z angular5powyższą odpowiedzią już nie działa!

Poniższy kod:

app.module.ts

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

Prowadzi do następującego błędu:

Błąd: brak danych regionalnych dla ustawień regionalnych „de-at”.

Ze angular5trzeba załadować i zarejestrować używany plik lokalizacji na własną rękę.

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

Dokumentacja

Jeśli używasz TranslateServicefrom @ngx-translate/core, poniżej znajduje się wersja bez tworzenia nowego potoku, która działa z dynamicznym przełączaniem w czasie wykonywania (testowana na Angular 7). Korzystanie z localeparametru DatePipe ( dokumentacja ):

Najpierw zadeklaruj ustawienia regionalne, których używasz w swojej aplikacji, np. W 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');
}

Następnie używaj potoku dynamicznie:

myComponent.component.html

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

myComponent.component.ts

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

Zajrzałem do date_pipe.ts i są tam dwie interesujące informacje. u góry znajdują się następujące dwie linie:

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

U dołu jest ta linia:

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

To sugeruje mi, że potok daty jest obecnie zakodowany na stałe jako „en-US”.

Proszę mnie oświecić, jeśli się mylę.

W app.module.ts dodaj następujące importy. Jest to lista opcji Locale tutaj .

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

Następnie dodaj dostawcę

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

Użyj rur w html. Oto dokumentacja kątowa .

{{ dateObject | date: 'medium' }}

Robisz coś takiego:

{{ dateObj | date:'shortDate' }}

lub

{{ dateObj | date:'ddmmy' }}

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

Zmagałem się z tym samym problemem i nie działałem, używając tego

{{dateObj | date:'ydM'}}

Próbowałem więc obejścia, nie najlepszego rozwiązania, ale zadziałało:

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

Zawsze mogę stworzyć niestandardową rurę.

Dla tych, którzy mają problemy z AOT, musisz zrobić to trochę inaczej z useFactory:

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

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

Skopiowany potok Google zmienił ustawienia regionalne i działa w moim kraju, możliwe, że nie ukończyli go dla wszystkich lokalizacji. Poniżej znajduje się kod.

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, proponuję to rozwiązanie, bardzo proste, za pomocą 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);
  }

}

To może być trochę za późno, ale w moim przypadku (angular 6) utworzyłem prostą rurkę na górze DatePipe, coś takiego:

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

Może nie jest to najlepsze rozwiązanie, ale proste i działa.