Как установить локаль в 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 , импортируемый из angular / core.

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

Приводит к следующей ошибке:

Ошибка: отсутствуют данные локали для локали "de-at".

При этом 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...
  ]
})

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

Если вы используете TranslateServicefrom @ngx-translate/core, ниже приведена версия без создания нового канала, который работает с динамическим переключением во время выполнения (протестировано на Angular 7). Используя localeпараметр DatePipe ( docs ):

Сначала объявите локали, которые вы используете в своем приложении, например 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);
}

Возможно, не лучшее решение, но простое и работает.