Bagaimana cara mengatur lokal di DatePipe di Angular 2?

Saya ingin menampilkan Tanggal menggunakan format Eropa dd/MM/yyyytetapi menggunakan format TanggalPipe Tanggal pendek hanya ditampilkan menggunakan gaya tanggal AS MM/dd/yyyy.
Saya berasumsi bahwa lokal default adalah en_US. Mungkin saya tidak ada di dokumen tetapi bagaimana saya bisa mengubah pengaturan lokal default di aplikasi Angular2? Atau mungkin adakah cara untuk meneruskan format kustom ke DatePipe?

Mulai Angular2 RC6, Anda bisa menyetel lokal default di modul aplikasi Anda, dengan menambahkan penyedia:

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

Pipa Currency / Date / Number harus menangkap lokal. LOCALE_ID adalah OpaqueToken , untuk diimpor dari sudut / inti.

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

Untuk kasus penggunaan yang lebih maju, Anda mungkin ingin mengambil lokal dari layanan. Lokal akan diselesaikan (sekali) ketika komponen yang menggunakan pipa tanggal dibuat:

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

Semoga berhasil untuk Anda.

Solusi dengan LOCALE_ID sangat bagus jika Anda ingin menyetel bahasa untuk aplikasi Anda sekali. Tapi itu tidak berhasil, jika Anda ingin mengubah bahasa selama runtime. Untuk kasus ini, Anda dapat menerapkan pipa tanggal khusus.

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

}

Sekarang jika Anda mengubah bahasa tampilan aplikasi menggunakan TranslateService (lihat ngx-translate )

this.translateService.use('en');

format dalam aplikasi Anda akan diperbarui secara otomatis.

Contoh penggunaan:

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

atau periksa proyek "Catatan" saya di sini .

Dengan angular5jawaban di atas tidak berfungsi lagi!

Kode berikut:

app.module.ts

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

Menyebabkan kesalahan berikut:

Kesalahan: Data lokal tidak ada untuk lokal "de-at".

Dengan angular5Anda harus memuat dan mendaftarkan file lokal yang digunakan sendiri.

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

Dokumentasi

Jika Anda menggunakan TranslateServicefrom @ngx-translate/core, di bawah ini adalah versi tanpa membuat pipa baru yang berfungsi dengan pengalihan secara dinamis pada waktu proses (diuji pada Angular 7). Menggunakan localeparameter DatePipe ( dokumen ):

Pertama, nyatakan lokal yang Anda gunakan di aplikasi Anda, misalnya di 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');
}

Kemudian, gunakan pipa Anda secara dinamis:

myComponent.component.html

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

myComponent.component.ts

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

Saya telah melihat-lihat di date_pipe.ts dan memiliki dua bit info yang menarik. di dekat bagian atas adalah dua baris berikut:

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

Di dekat bagian bawah adalah baris ini:

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

Ini menunjukkan kepada saya bahwa pipa tanggal saat ini di-hardcode menjadi 'en-US'.

Tolong beri tahu saya jika saya salah.

Di app.module.ts tambahkan impor berikut. Ada daftar opsi LOCALE di sini .

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

Kemudian tambahkan penyedia

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

Gunakan pipa di html. Berikut adalah dokumentasi sudut untuk ini.

{{ dateObject | date: 'medium' }}

Anda melakukan sesuatu seperti ini:

{{ dateObj | date:'shortDate' }}

atau

{{ dateObj | date:'ddmmy' }}

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

Saya berjuang dengan masalah yang sama dan tidak berhasil untuk saya menggunakan ini

{{dateObj | date:'ydM'}}

Jadi, saya sudah mencoba solusi, bukan solusi terbaik tetapi berhasil:

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

Saya selalu dapat membuat pipa khusus.

Bagi mereka yang mengalami masalah dengan AOT, Anda perlu melakukannya sedikit berbeda dengan useFactory:

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

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

Mulai dari proses lokalisasi Angular 9 diubah. Lihat dokumen resmi .

Ikuti langkah-langkah di bawah ini:

1. Tambahkan paket pelokalan jika belum ada: ng add @angular/localize
2. Seperti yang dikatakan di dokumen:

Repositori Angular mencakup lokal umum. Anda bisa mengubah lokal sumber aplikasi Anda untuk build dengan menyetel lokal sumber di bidang sourceLocale di file konfigurasi ruang kerja aplikasi Anda (angular.json). Proses build (dijelaskan dalam Menggabungkan terjemahan ke dalam aplikasi dalam panduan ini) menggunakan file angular.json aplikasi Anda untuk menyetel token LOCALE_ID secara otomatis dan memuat data lokal.

jadi setel lokal angular.jsonseperti ini (daftar lokal yang tersedia dapat ditemukan di sini ):

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "i18n": {
        "sourceLocale": "es"
      },
      ....
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          ...
          "configurations": {
            "production": {
             ...
            },
            "ru": {
              "localize": ["ru"]
            },
            "es": {
              "localize": ["es"]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "test-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "test-app:build:production"
            },
            "ru":{
              "browserTarget": "test-app:build:ru"
            },
            "es": {
              "browserTarget": "test-app:build:es"
            }
          }
        },
        ...
      }
    },
    ...
  "defaultProject": "test-app"
}

Pada dasarnya Anda perlu mendefinisikan sourceLocaledi i18nbagian dan menambahkan konfigurasi build dengan lokal tertentu seperti "localize": ["es"]. Opsional Anda dapat menambahkannya jadi servebagian

3. Bangun aplikasi dengan lokal tertentu menggunakan buildatau serve:ng serve --configuration=es

Menyalin pipa google mengubah lokal dan berfungsi untuk negara saya, mungkin mereka tidak menyelesaikannya untuk semua lokal. Di bawah ini adalah kodenya.

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

Oke, saya usulkan solusi ini, sangat sederhana, menggunakan 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);
  }

}

Ini mungkin sedikit terlambat, tetapi dalam kasus saya (sudut 6), saya membuat pipa sederhana di atas DatePipe, seperti ini:

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

Mungkin bukan solusi terbaik, tapi sederhana dan berhasil.