Як встановити локаль у DatePipe у Angular 2?

Я хочу відобразити дату у європейському форматі, dd/MM/yyyyале використовуючи формат DatePipe shortDate , вона відображається лише у стилі дати США MM/dd/yyyy.
Я припускаю, що цей локальний код за замовчуванням - це en_US. Можливо, мені не вистачає в документах, але як я можу змінити параметри локалі за замовчуванням у додатку Angular2? А може, є якийсь спосіб передати користувальницький формат DatePipe?

Станом на Angular2 RC6, ви можете встановити локальний код за замовчуванням у своєму модулі програми, додавши постачальника:

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

Труби з валютою / датою / номером повинні вибрати місце. LOCALE_ID - це OpaqueToken , який потрібно імпортувати з кутового / основного.

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

Для більш розширеного випадку використання, можливо, ви захочете вибрати локальний сервіс у сервісу. Місце розташування буде вирішено (один раз), коли буде створено компонент, що використовує дату:

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

Сподіваюся, це працює для вас.

Рішення з LOCALE_ID чудово, якщо ви хочете один раз встановити мову для свого додатка. Але це не працює, якщо ви хочете змінити мову під час виконання. У цьому випадку ви можете реалізувати спеціальну дату.

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

}

Тепер, якщо ви змінили мову відображення програми за допомогою TranslateService (див. Ngx-translate )

this.translateService.use('en');

формати вашого додатка повинні автоматично оновлюватися.

Приклад використання:

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

або перевірте мій простий проект "Примітки" тут .

З angular5вищезазначеною відповіддю більше не працює!

Наступний код:

app.module.ts

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

Приводить до наступної помилки:

Помилка: відсутні локальні дані для локалі "де-у".

З angular5ви повинні завантажити та зареєструвати використовувану локаль файл на свій розсуд.

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

Документація

Якщо ви використовуєте TranslateServiceз @ngx-translate/core, нижче - версія без створення нової труби, яка працює з динамічним перемиканням під час виконання (тестується на Angular 7). Використання localeпараметра DatePipe ( документи ):

Спочатку оголосіть локалі, які ви використовуєте у вашій програмі, наприклад у 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');
}

Потім динамічно використовуйте трубу:

myComponent.component.html

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

myComponent.component.ts

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

Я переглянув date_pipe.ts, і він має два біти інформації, які цікавлять. у верхній частині розташовані наступні два рядки:

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

У нижній частині знаходиться цей рядок:

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

Це підказує мені, що на сьогоднішній день трубопровідний термін важко кодований як "en-US".

Будь ласка, просвітліть мене, якщо я помиляюся.

На app.module.ts додайте наступний імпорт. Існує список опцій Locale тут .

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

Потім додайте провайдера

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

Використовуйте труби в html. Ось кутова документація на це.

{{ dateObject | date: 'medium' }}

Ви робите щось подібне:

{{ dateObj | date:'shortDate' }}

або

{{ dateObj | date:'ddmmy' }}

Дивіться: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Я боровся з тим же питанням і не працював для мене, використовуючи це

{{dateObj | date:'ydM'}}

Отже, я спробував вирішити не найкраще рішення, але це спрацювало:

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

Я завжди можу створити власну трубу.

Тим, хто має проблеми з AOT, потрібно зробити це трохи інакше за допомогою useFactory:

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

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

Скопійована труба google змінила місцевість, і вона працює для моєї країни. Можливо, вони не закінчили її для всіх локалів. Нижче наведено код.

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

Гаразд, пропоную це рішення, дуже просте, з використанням 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);
  }

}

Це може бути трохи пізно, але в моєму випадку (кутовий 6) я створив просту трубку поверх DatePipe, приблизно так:

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

Можливо, це не найкраще рішення, але просте і працює.