0 Comentarios
Angular moment.js es una forma habitual de referirse al uso de Moment.js dentro de una aplicación Angular para formatear, validar, comparar y manipular fechas. En la práctica, puedes usar Moment directamente desde componentes o servicios, o apoyarte en librerías como ngx-moment para trabajar con pipes en las plantillas. En esta guía vas a ver qué opción tiene sentido, cómo instalarlo, cómo mostrar fechas en español, qué problemas debes evitar y cuándo conviene elegir alternativas modernas como DatePipe, Day.js, Luxon o date-fns.
Moment.js es una librería JavaScript para trabajar con fechas y horas: permite parsear fechas, validarlas, sumarlas o restarlas, compararlas, cambiar su formato y mostrarlas en distintos idiomas. La propia web de Moment la describe como una herramienta para “parse, validate, manipulate, and display dates and times in JavaScript”, es decir, para interpretar, validar, manipular y mostrar fechas en JavaScript.
¿Para qué se usa en Angular? Por ejemplo:
Mostrar una fecha de publicación como 12/06/2026.
Convertir una fecha ISO del backend en un formato legible.
Mostrar textos como “hace 2 horas”.
Validar si una fecha introducida por el usuario es correcta.
Calcular vencimientos, reservas, plazos o rangos.
Gestionar zonas horarias en aplicaciones internacionales.
En proyectos reales, las fechas parecen fáciles hasta que dejan de serlo. Un formulario de reserva, un panel de pedidos, una agenda, una intranet o una web con contenidos programados pueden necesitar una lógica más cuidada que un simple new Date().
Conviene aclarar esto pronto, porque aquí suele venir la confusión.
angular2-moment para versiones anteriores y angular-moment para AngularJS.Dicho más claro: si estás en un Angular moderno, normalmente mirarás Moment.js directamente o ngx-moment. Si estás manteniendo una aplicación antigua, puede que te encuentres angular-moment o angular2-moment en el código.
Moment.js no siempre es la mejor elección hoy, pero sigue teniendo escenarios donde es razonable. La clave está en no instalarlo “por costumbre”.
Si trabajas en una aplicación Angular que ya usa Moment de forma intensiva, mantenerlo puede ser sensato. Reescribir toda la lógica de fechas solo porque existe una alternativa más moderna no siempre compensa.
En Overant solemos verlo en proyectos con paneles internos, CRMs, reservas, calendarios o integraciones antiguas. Si Moment ya está presente, el equipo lo conoce y no hay problemas graves de rendimiento, puedes mantenerlo mientras defines una migración progresiva.
Moment encaja bien cuando necesitas operaciones frecuentes y legibles:
const fecha = moment('2026-06-12'); const vencimiento = fecha.add(7, 'days').format('DD/MM/YYYY');
Para un perfil inicial-intermedio, esta sintaxis resulta bastante cómoda. Se entiende casi como una frase: toma una fecha, suma siete días y dale formato.
También es útil cuando recibes fechas en distintos formatos y necesitas normalizarlas antes de mostrarlas o enviarlas a una API.
Para proyectos nuevos, conviene pensarlo dos veces. El propio equipo de Moment considera la librería un proyecto legacy en modo mantenimiento, no muerto, pero sí “terminado”; además, desaconseja usarlo en proyectos nuevos y no prevé añadir nuevas funcionalidades ni resolver problemas de tree shaking o tamaño del paquete.
Si estás empezando una aplicación Angular desde cero, probablemente te interese valorar primero DatePipe, Day.js, Luxon o date-fns.
La instalación es sencilla. Lo importante es no quedarse solo en el comando, sino entender dónde conviene usar Moment dentro de Angular.
Desde la raíz del proyecto:
npm install moment
Si además quieres usar pipes con ngx-moment:
npm install moment ngx-moment
El propio repositorio de ngx-moment recoge esa instalación y muestra que después se importa MomentModule en el módulo correspondiente.
En un componente o servicio puedes importarlo así:
import * as moment from 'moment'; export class FechaService { formatear(fecha: string): string { return moment(fecha).format('DD/MM/YYYY'); } }
Aunque puedas usarlo en un componente, lo más limpio suele ser llevar la lógica de fechas a un servicio. Así evitas repetir formatos y reduces errores.
En TypeScript, Moment suele funcionar sin demasiada configuración adicional. Si tu proyecto tiene reglas estrictas de imports, puedes necesitar ajustar la forma de importarlo según tu configuración de tsconfig.
Una estructura razonable sería crear un servicio:
import { Injectable } from '@angular/core'; import * as moment from 'moment'; @Injectable({ providedIn: 'root' }) export class DatesService { toSpanishDate(value: string | Date): string { return moment(value).format('DD/MM/YYYY'); } }
Así, cuando cambies de librería en el futuro, no tendrás que tocar veinte componentes.
El formateo es una de las razones principales por las que muchos equipos han usado Moment durante años.
Para mostrar una fecha habitual en España:
moment('2026-06-12').format('DD/MM/YYYY'); // 12/06/2026
Para incluir hora:
moment('2026-06-12T17:30:00').format('DD/MM/YYYY HH:mm'); // 12/06/2026 17:30
Aquí DD representa el día, MM el mes y YYYY el año. Es una convención muy habitual, aunque conviene no mezclarla con los tokens de otras librerías porque no siempre coinciden.
También puedes generar formatos más editoriales:
moment('2026-06-12').format('D [de] MMMM [de] YYYY'); // 12 de junio de 2026
Los corchetes sirven para insertar texto literal. Es muy útil en blogs, fichas de eventos, páginas corporativas o paneles donde quieres un resultado más humano.
Moment permite mostrar fechas relativas con fromNow():
moment('2026-06-12T10:00:00').fromNow();
Dependiendo de la fecha actual, el resultado puede ser “hace unas horas”, “en 3 días” o similar. Para que salga en español, tendrás que configurar el locale, como veremos más abajo.
En Angular, un pipe transforma un valor directamente en la plantilla. Por ejemplo, Angular ya trae pipes nativos como date, uppercase o currency.
ngx-moment añade pipes basados en Moment para que puedas escribir transformaciones de fecha en el HTML sin llamar manualmente a funciones desde el componente.
La ventaja principal es la comodidad:
<p>Actualizado: {{ updatedAt | amTimeAgo }}</p>
En vez de preparar el texto en el componente, lo formateas en la plantilla.
Ahora bien, no conviene abusar. Una plantilla Angular debe ser fácil de leer. Si empiezas a encadenar transformaciones complejas, mejor mover esa lógica a un servicio o al componente.
ngx-moment incluye pipes como amTimeAgo y amCalendar. Su documentación muestra ejemplos como {{myDate | amTimeAgo}} para imprimir textos de tipo “a few seconds ago”, y {{myDate | amCalendar}} para salidas de calendario como “Today at 14:00”.
Ejemplos prácticos:
<p>{{ createdAt | amTimeAgo }}</p> <p>{{ updatedAt | amCalendar }}</p> <p>{{ publishedAt | amDateFormat:'DD/MM/YYYY' }}</p>
Esto resulta útil en listados de noticias, dashboards, comentarios, actividad reciente o notificaciones.
Usa pipes para transformaciones simples y visuales. Para reglas de negocio, cálculos de vencimiento, validaciones o conversiones entre zonas horarias, mejor utiliza servicios.
Una regla sencilla: si la fecha afecta a una decisión de la aplicación, no la escondas en la plantilla.
Las fechas no se leen igual en España, Estados Unidos o Alemania. Parece obvio, pero muchos errores vienen de aquí.
Puedes configurar Moment en español importando el locale:
import * as moment from 'moment'; import 'moment/locale/es'; moment.locale('es');
Después:
moment('2026-06-12').format('LL'); // 12 de junio de 2026
Moment tiene soporte de internacionalización y permite cambiar el locale de forma global o local según el uso que hagas en tu aplicación.
En España, lo habitual es usar:
DD/MM/YYYY DD/MM/YYYY HH:mm D [de] MMMM [de] YYYY
Para una web corporativa o una tienda online, 12/06/2026 puede ser suficiente. Para una página de evento o una noticia, suele quedar mejor 12 de junio de 2026.
Elige un criterio y mantenlo. Cambiar entre 2026-06-12, 12/06/26 y 12 junio 2026 en distintas partes de la web da sensación de descuido.
El error más habitual es configurar Moment en español en un sitio, pero no en toda la aplicación. Otro problema típico es asumir que el navegador del usuario siempre estará en español.
También ocurre mucho con aplicaciones multiidioma: el texto de la interfaz cambia, pero las fechas siguen saliendo en inglés. Pequeño detalle, sí; pero se nota.
Las zonas horarias son uno de los puntos más delicados del desarrollo front-end. Una fecha que en Madrid es lunes por la mañana puede seguir siendo domingo en otra parte del mundo.
Moment por sí solo trabaja con hora local y UTC, pero para zonas horarias concretas como Europe/Madrid o America/Mexico_City se utiliza Moment Timezone.
Tiene sentido usarlo en aplicaciones con reservas internacionales, eventos online, calendarios globales, vuelos, clases en directo o herramientas SaaS con usuarios en varios países.
La documentación de Moment recuerda que, por defecto, moment() parsea y muestra en hora local, mientras que moment.utc() trabaja en modo UTC. También indica que ambos pueden representar el mismo instante aunque se muestren de forma distinta.
Una práctica razonable:
Guarda en backend en UTC.
Envía fechas en ISO 8601.
Convierte a hora local solo al mostrar.
No mezcles formatos sin documentarlo.
Ejemplo:
const local = moment.utc(apiDate).local().format('DD/MM/YYYY HH:mm');
Define desde el principio qué representa cada fecha. No es lo mismo la fecha de creación de un pedido que la hora de inicio de un webinar.
En aplicaciones globales, recomendamos documentar tres cosas: formato de entrada, zona horaria de almacenamiento y formato de salida. Parece burocrático, pero ahorra bugs bastante feos.
Moment fue durante años casi el estándar de facto para fechas en JavaScript. Aun así, hoy hay que mirarlo con cierto criterio.
Su gran ventaja es que se aprende rápido. Métodos como format, add, subtract, isBefore o fromNow son bastante expresivos.
Para alguien que está empezando, esto ayuda mucho. No necesitas entender de golpe todos los matices del objeto Date nativo de JavaScript.
Aquí aparece uno de sus puntos débiles. Moment no encaja bien con tree shaking y puede aumentar el tamaño del bundle, especialmente si añades locales o zonas horarias. La documentación oficial lo menciona como una de las razones para preferir alternativas modernas en muchos casos.
En una web pequeña puede no ser dramático. En una aplicación grande, cada kilobyte cuenta.
Moment prioriza estabilidad, no nuevas funcionalidades. Eso puede ser bueno en aplicaciones antiguas, pero no tanto en proyectos nuevos.
Además, los objetos Moment son mutables: si haces operaciones como add o subtract, puedes modificar el objeto original. La documentación lo advierte expresamente y recomienda clonar cuando necesitas conservar el valor inicial.
Hoy tienes varias opciones sólidas. No hay una respuesta universal, pero sí patrones claros.
Angular incluye DatePipe, que permite formatear fechas según reglas de locale. Su API acepta valores tipo Date, número o string ISO, permite indicar formato, zona horaria y locale, y usa en-US por defecto si no configuras otro locale.
Ejemplo:
{{ fecha | date:'dd/MM/yyyy':'':'es' }}
Para muchas webs y paneles sencillos, DatePipe basta.
Day.js es una librería minimalista con una API muy parecida a Moment. Su documentación la presenta como una utilidad de unas 2 kB, compatible en gran parte con la API de Moment e inmutable: las operaciones devuelven una nueva instancia en lugar de modificar la original.
Es una opción interesante si quieres algo familiar, pero más ligero.
Luxon, creada dentro del ecosistema de Moment, está pensada para trabajar mejor con internacionalización, zonas horarias y la API Intl. Su documentación destaca el soporte integrado de zonas horarias y la internacionalización mediante Intl.
Si tu aplicación tiene un componente internacional importante, Luxon suele ser una candidata muy seria.
date-fns funciona con funciones independientes. Importas lo que necesitas y evitas cargar una librería monolítica. Su documentación destaca el enfoque modular, el uso de Date nativo y el soporte para tree shaking.
Puede gustarte si prefieres una forma más funcional de trabajar.
No hace falta una tabla enorme para decidir. Mejor verlo por escenarios.
Moment suele perder en tamaño y optimización moderna. Day.js gana por ligereza y familiaridad. DatePipe gana por venir integrado en Angular. Luxon gana cuando la zona horaria y la internacionalización pesan mucho. date-fns gana cuando quieres importar solo funciones concretas.
La migración más suave desde Moment suele ser hacia Day.js, porque su API resulta familiar. Pero ojo: “parecida” no significa idéntica.
Nuestra recomendación editorial es clara: para proyectos nuevos, no instalaríamos Moment.js por defecto. Empezaríamos con DatePipe y subiríamos de nivel solo si el proyecto lo necesita.
Para aplicaciones existentes, haríamos una auditoría antes de tocar nada. Cambiar fechas sin pruebas es una receta bastante buena para romper cosas sin darte cuenta.
Y si además estás revisando la arquitectura de tu web, su rendimiento y su base técnica, puedes hablar con nuestro equipo de diseño web en Alicante. En Overant trabajamos este tipo de decisiones desde el impacto real en negocio, SEO y experiencia de usuario, no solo desde la moda técnica del momento.
Las fechas fallan en producción por detalles pequeños. Vamos con los más comunes.
Como hemos visto, Moment es mutable. Esto significa que una operación puede cambiar el valor original:
const inicio = moment('2026-06-12'); const fin = inicio.add(7, 'days'); console.log(inicio.format('DD/MM/YYYY')); // 19/06/2026
Si querías conservar inicio, deberías clonar:
const fin = inicio.clone().add(7, 'days');
Otro clásico: el backend envía 2026-06-12T10:00:00Z, el frontend espera 12/06/2026, y alguien acaba parseando una fecha a mano.
Evítalo. Define un contrato. Por ejemplo: el backend envía ISO 8601 en UTC y el frontend formatea para el usuario.
El parseo de strings con Date.parse o new Date(string) puede variar según formato y entorno; la documentación de Moment advierte de inconsistencias históricas y recomienda usar string más formato para resultados consistentes cuando no trabajas con ISO 8601.
No confíes en que “si funciona en Chrome, funciona en todos”. Prueba Safari, móvil y cambios de zona horaria.
Una buena gestión de fechas no depende solo de la librería. Depende de cómo organizas el código.
Crea un servicio de fechas:
@Injectable({ providedIn: 'root' }) export class DateFormatService { displayDate(value: string | Date): string { return moment(value).format('DD/MM/YYYY'); } }
Así todo el proyecto usa el mismo criterio.
Una plantilla debería decir qué se muestra, no esconder reglas de negocio. Usa pipes para presentaciones simples, pero evita cálculos complejos en HTML.
Mal:
{{ order.createdAt | amAdd:7:'days' | amDateFormat:'DD/MM/YYYY' }}
Mejor: calcula la fecha de vencimiento en el componente o servicio y muestra el resultado.
Decide cómo se guardan, cómo se procesan y cómo se muestran las fechas.
Por ejemplo:
Almacenar en UTC.
Recibir y enviar ISO 8601.
Mostrar en DD/MM/YYYY para España.
Usar textos relativos solo en actividad reciente.
Es una decisión pequeña que da mucha coherencia.
Migrar no significa borrar Moment de golpe. Casi nunca es buena idea.
Empieza buscando usos de:
moment( .format( .add( .subtract( .fromNow( .utc(
Clasifica esos usos: formateo simple, cálculo, validación, zona horaria o fecha relativa. Así sabrás qué alternativa cubre cada caso.
Crea un servicio intermedio. Primero encapsulas Moment dentro del servicio. Después cambias la implementación interna por DatePipe, Day.js, Luxon o date-fns.
Este enfoque reduce riesgo porque los componentes siguen llamando al mismo método.
Antes de migrar, añade pruebas con fechas delicadas:
Cambios de mes.
Años bisiestos.
Cambios de horario de verano.
Fechas UTC.
Usuarios en otra zona horaria.
Locale español e inglés.
Las fechas no perdonan los “ya lo revisaremos luego”.
Depende. Para proyectos nuevos, normalmente no sería nuestra primera opción porque Moment está en modo mantenimiento y tiene limitaciones de tamaño, mutabilidad y optimización moderna. Para proyectos existentes que ya lo usan, puede seguir siendo válido si está bien encapsulado y no genera problemas.
Moment.js es la librería base para trabajar con fechas. ngx-moment es una integración para Angular que ofrece pipes como amTimeAgo, amCalendar o amDateFormat, pensados para usarse en plantillas. ngx-moment no sustituye a Moment: lo utiliza por debajo.
Sí, puedes usar Moment.js como dependencia JavaScript en versiones recientes de Angular. Otra cosa es que sea la mejor decisión para un proyecto nuevo. Si solo necesitas formatear fechas sencillas, empieza valorando DatePipe. Si necesitas una librería externa, compara antes con Day.js, Luxon o date-fns.
Para una web o aplicación sencilla, DatePipe suele ser suficiente. Para una API parecida a Moment con menor peso, Day.js es cómoda. Para zonas horarias y escenarios internacionales, Luxon suele encajar mejor. Para una arquitectura modular basada en funciones, date-fns es muy buena opción.
No. Esta confusión aparece alguna vez, y es normal si estás empezando. Moment.js no es un modal visual ni un componente de interfaz. Es una librería JavaScript para manejar fechas. Puedes usarla dentro de Angular, pero no pertenece al framework.
No. Puedes instalar solo moment y usarlo en componentes, servicios o utilidades. ngx-moment solo tiene sentido si quieres pipes listos para usar en plantillas Angular.
No demasiado. En Moment debes importar el locale español y activar moment.locale('es'). En Angular DatePipe, debes configurar los datos de locale correspondientes si quieres localización completa. Lo importante es hacerlo de forma global y consistente, no improvisar formato por formato.
Angular moment.js sigue siendo una búsqueda muy común porque hay muchísimos proyectos Angular que han usado Moment durante años. Y se entiende: es fácil de leer, potente y muy cómodo para formatear, validar y manipular fechas.
Pero el contexto ha cambiado. Hoy, para un proyecto nuevo, no conviene instalar Moment.js automáticamente. Primero mira si DatePipe cubre tu caso. Si necesitas más potencia, valora Day.js, Luxon o date-fns según el tipo de aplicación.
Nuestra recomendación práctica sería esta: usa Moment si ya está en tu proyecto y te compensa mantenerlo; evita añadirlo por defecto en desarrollos nuevos; y, sobre todo, centraliza siempre la lógica de fechas. La librería importa, sí, pero la arquitectura importa más. Ahí es donde una aplicación Angular pasa de “funciona en mi ordenador” a ser mantenible, escalable y fiable de verdad.
¿Qué te ha parecido este artículo?