Как установить языковой стандарт в DatePipe в Angular 2?

Ответ 1

Как и в случае с 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
}

Надеюсь, что это сработает для вас.

Ответ 2

Решение с 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>

или проверьте мой простой проект "Примечания" здесь.

Ответ 3

Я посмотрел 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.

Прошу просветить меня, если я ошибаюсь.

Ответ 4

Вы делаете что-то вроде этого:

{{ dateObj | date:'shortDate' }}

или

{{ dateObj | date:'ddmmy' }}

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

Ответ 5

Я боролся с той же проблемой и не работал у меня, используя этот

{{dateObj | date:'ydM'}}

Итак, я пробовал обходное решение, а не лучшее решение, но он работал:

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

Я всегда могу создать настраиваемый канал.

Ответ 6

Скопированный 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); }
}

Ответ 7

Для тех, у кого проблемы с AOT, вам нужно сделать это немного по-другому с помощью useFactory:

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

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