Quiero mostrar la fecha usando el formato europeo dd/MM/yyyy pero usando el formato DatePipe shortDate solo se muestra usando el estilo de fecha de EE. UU MM/dd/yyyy .
Supongo que la configuración regional predeterminada es en_US. Tal vez me falta en los documentos, pero ¿cómo puedo cambiar la configuración regional predeterminada en una aplicación Angular2? ¿O tal vez hay alguna forma de pasar un formato personalizado a DatePipe?
A partir de Angular2 RC6, puede establecer la configuración regional predeterminada en el módulo de su aplicación agregando un proveedor:
@NgModule({ providers: [ { provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale //otherProviders... ] })Los conductos de Moneda/Fecha/Número deben recoger la configuración regional. LOCALE_ID es un OpaqueToken , para ser importado desde angular/core.
import { LOCALE_ID } from '@angular/core';Para un caso de uso más avanzado, es posible que desee seleccionar la configuración regional de un servicio. La configuración regional se resolverá (una vez) cuando se cree el componente que usa la tubería de fecha:
{ provide: LOCALE_ID, deps: [SettingsService], //some service handling global settings useFactory: (settingsService) => settingsService.getLanguage() //returns locale string }Espero que funcione para ti.
La solución con LOCALE_ID es excelente si desea configurar el idioma de su aplicación una vez. Pero no funciona, si desea cambiar el idioma durante el tiempo de ejecución. Para este caso, puede implementar una tubería de fecha personalizada.
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); } }Ahora, si cambia el idioma de visualización de la aplicación usando TranslateService (ver ngx-translate )
this.translateService.use('en');los formatos dentro de su aplicación deberían actualizarse automáticamente.
Ejemplo de uso:
<p>{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}</p> <p>{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}</p>o consulte mi proyecto simple de "Notas" aquí .
¡Con angular5 la respuesta anterior ya no funciona!
El siguiente código:
aplicación.módulo.ts
@NgModule({ providers: [ { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale //otherProviders... ] })Conduce al siguiente error:
Error: Faltan datos de configuración regional para la configuración regional "de-at".
Con angular5 , debe cargar y registrar el archivo de configuración regional utilizado por su cuenta.
aplicación.módulo.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... ] })