Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

868
Visualizações
¿Cómo establecer la configuración regional en DatePipe en Angular 2?

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?

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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.

over 4 years ago · Santiago Trujillo Relatório

0

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í .

ingrese la descripción de la imagen aquí

over 4 years ago · Santiago Trujillo Relatório

0

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

Documentación

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda