0

Tengo un pipe que recibo de la siguiente forma:

Jan 6, 2022, 11:00 AM

Pero quiero traducirlo al español

Ene 6, 2022, 11:00 AM

¿Cómo puedo hacer esto en angular?

<h4 class="whiteText">{{date | date:'MMM d, y, h:mm a'}} </h4>

5
  • 1
    Para poder cambiarle la fecha debes decirle a angular qué "locale" usas. Para empezar, en tu app añades los import import localeEs from @angular/common/locales/es'; import { registerLocaleData } from '@angular/common'; a continuación justo después de los import mismamente pones registerLocaleData(localeEs, 'es'); y en el @ngModule de tu AppModule añades providers: [{provide: LOCAL_ID, useValue: 'es'}]. Con estos pasos debería funcionarte.... pero depende de la versión de angular un poco, y ni siquiera has especificado cual usas :)
    – Benito-B
    el 5 ene. 2022 a las 21:41
  • Gracias por responderme, enserio muchas gracias, utilizar angular/cli 12.1.4, probare lo que me dices para ver si funciona
    – Izlia
    el 5 ene. 2022 a las 23:02
  • 1
    @Benito-B Deberías publicar tu comentario como respuesta. Es el procedimiento habitual desde hace algunas versiones.
    – Legna
    el 6 ene. 2022 a las 3:48
  • @Benito-B Ya! Funcionó super, gracias por tu ayuda
    – Izlia
    el 6 ene. 2022 a las 14:50
  • @Izlia Me alegra que te ayudase. Lo he puesto como respuesta, si puedes marcarla como aceptada nos aseguramos de que alguien que tenga la misma duda vea cual es la solución :)
    – Benito-B
    el 6 ene. 2022 a las 15:12

1 respuesta 1

1

Para cambiar el idioma por defecto del pipe date de Angular necesitas indicarle que "locale" usar. Concretamente debes añadir estas líneas (normalmente en tu clase AppModule):

... //otros import que use tu módulo
import {LOCALE_ID } from '@angular/core';
import localeEs from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeEs, 'es'); //Esto no es un import, pero va justo despues de ellos!
@NgModule({
  imports: [...], // Los que use tu app
  declarations: [...], // Los que use tu app
  providers: [..., // Los que use tu app
    {provide: LOCALE_ID, useValue: 'es'} // Añades esta línea en los providers
  ],
  bootstrap: [ AppComponent ] // Lo que use tu app aquí
})
export class AppModule {}

Y con esto, todos tus pipe date irán en español

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.