web-dev-qa-db-ja.com

DatePipeのロケールをAngular 2に設定するにはどうすればいいですか？

ヨーロッパ形式のdd/mm/yyyyを使用して日付を表示したいのですが、DatePipeshortDate形式を使用すると、米国の日付スタイルmm/dd/yyyyのみを使用して表示されます。
デフォルトのロケールはen_USだと思います。ドキュメントに欠けているかもしれませんが、Angular 2アプリケーションでデフォルトのロケール設定を変更する方法を教えてください。それとも、DatePipeにカスタムフォーマットを渡す方法はありますか？

javascriptangulardate-pipe
114
nsbm

Angular 2 RC6以降では、プロバイダを追加して、アプリモジュールでデフォルトのロケールを設定できます。

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

Currency/Date/Numberパイプはロケールを選択します。 LOCALE_IDは、Angular/Coreからインポートされる OpaqueToken です。

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

より高度なユースケースでは、サービスからロケールを取得することができます。日付パイプを使用するコンポーネントが作成されると、ロケールは（一度）解決されます。

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

それがあなたのために働くことを願っています。

234
corolla

あなたが一度あなたのアプリのために言語を設定したいならば、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>

または私の簡単な "Notes"プロジェクト をここでチェックしてください 。

enter image description here

47
Milan Hlinák

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

ドキュメント

41
zgue

私はdate_pipe.tsを見ていました、そしてそれは興味のある2ビットの情報を持っています。上部付近には、次の2行があります。

// 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'になるようにハードコードされていることを私に示唆しています。

私が間違っているなら私を啓発してください。

12
Mark Farmiloe

あなたはこのようなことをする：

{{ dateObj | date:'shortDate' }}

または

{{ dateObj | date:'ddmmy' }}

参照してください： https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

4
Langley

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' }}
4
Alejandro del Río

AOTに問題がある人のために、useFactoryを使ってそれを少し違ったやり方でする必要があります：

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

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

私は同じ問題に苦しんでいて、これを使って私のために働かなかった

{{dateObj | date:'ydM'}}

そのため、最善の解決策ではなく回避策を試しましたが、うまくいきました。

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

私はいつでもカスタムパイプを作成することができます。

3
hydrangenius

@ngx-translate/coreからTranslateServiceを使用する場合、以下は実行時に動的に切り替わる新しいパイプを作成しないバージョンです（Angular 7でテスト済み）。 DatePipeのlocaleパラメータ（ 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) { ... }
2
knnhcn

わかりました、私は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);
  }

}
0
LizanLycan

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); }
}
0
Dživo Jelić