Aprende a trabajar con fechas y dinero sin errores silenciosos: crea objetos Date fiables, formatea por locale con Intl y evita bugs típicos de zona horaria.
Cuando una app muestra fechas o precios, no basta con que el dato exista: debe verse correcto para la persona usuaria y su país.
`Date` te da el valor temporal; `Intl` te permite presentarlo con formato humano según locale y reglas regionales.
Si ignoras zona horaria y formato, aparecen bugs clásicos: días desplazados, meses invertidos o importes mal interpretados.
Objetivo de esta lección: formatear fechas y moneda de forma fiable, legible y reutilizable en proyectos reales.
No es estética: es precisión funcional para usuarios de distintos países.
Un mismo valor (`1234.56`) puede mostrarse como `1.234,56 €` en España o `$1,234.56` en EE. UU. Si formateas mal, el usuario interpreta mal el dato.
Con `Intl` defines reglas explícitas de locale y formato. Eso evita manipular strings manualmente y reduce errores de mantenimiento.
No todas las cadenas se parsean igual en todos los navegadores.
Prioriza formatos ISO (`YYYY-MM-DD` o `YYYY-MM-DDTHH:mm:ssZ`) y evita fechas ambiguas tipo `05/06/2026` cuando no controlas locale.
Para inputs de fecha sin hora, una técnica útil es añadir `T12:00:00` para minimizar desplazamientos por zona horaria al renderizar.
Define locale y opciones para mostrar exactamente lo que necesitas.
`Intl.DateTimeFormat` transforma un objeto `Date` en texto adaptado al idioma y región. Así evitas concatenar día/mes/año a mano.
Para rendimiento y consistencia, puedes crear el formateador una vez y reutilizarlo en listas o tablas.
El símbolo no es suficiente: también importan separadores y decimales.
`Intl.NumberFormat` con `style: 'currency'` aplica reglas regionales completas para representar dinero de forma correcta.
Misma cifra, distinta salida según locale. Este detalle es esencial en ecommerce, facturación y paneles de analítica.
La mayoría de problemas aparecen por ambigüedad de entrada o falta de contexto de zona horaria.
Si una fecha cambia de día al renderizar, revisa en qué zona se creó y en cuál se está mostrando. No es un bug aleatorio: es una conversión temporal.
Define convenciones de equipo (UTC en backend, locale en frontend, funciones compartidas) para evitar inconsistencias entre pantallas.
Aprende a trabajar con fechas y dinero sin errores silenciosos: crea objetos Date fiables, formatea por locale con Intl y evita bugs típicos de zona horaria.
Código del tema: Date · Intl.DateTimeFormat · Intl.NumberFormat
No es estética: es precisión funcional para usuarios de distintos países.
Un mismo valor (`1234.56`) puede mostrarse como `1.234,56 €` en España o `$1,234.56` en EE. UU. Si formateas mal, el usuario interpreta mal el dato.
Con `Intl` defines reglas explícitas de locale y formato. Eso evita manipular strings manualmente y reduce errores de mantenimiento.
No todas las cadenas se parsean igual en todos los navegadores.
Prioriza formatos ISO (`YYYY-MM-DD` o `YYYY-MM-DDTHH:mm:ssZ`) y evita fechas ambiguas tipo `05/06/2026` cuando no controlas locale.
Para inputs de fecha sin hora, una técnica útil es añadir `T12:00:00` para minimizar desplazamientos por zona horaria al renderizar.
const fechaISO = '2026-02-14';
const fecha = new Date(`${fechaISO}T12:00:00`);
console.log('timestamp:', fecha.getTime());
console.log('iso:', fecha.toISOString());Define locale y opciones para mostrar exactamente lo que necesitas.
`Intl.DateTimeFormat` transforma un objeto `Date` en texto adaptado al idioma y región. Así evitas concatenar día/mes/año a mano.
Para rendimiento y consistencia, puedes crear el formateador una vez y reutilizarlo en listas o tablas.
const fecha = new Date('2026-06-21T18:30:00Z');
const formateadorES = new Intl.DateTimeFormat('es-ES', {
dateStyle: 'full',
timeStyle: 'short',
timeZone: 'Europe/Madrid'
});
console.log(formateadorES.format(fecha));El símbolo no es suficiente: también importan separadores y decimales.
`Intl.NumberFormat` con `style: 'currency'` aplica reglas regionales completas para representar dinero de forma correcta.
Misma cifra, distinta salida según locale. Este detalle es esencial en ecommerce, facturación y paneles de analítica.
const total = 1234.56;
const es = new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' });
const us = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(es.format(total));
console.log(us.format(total));La mayoría de problemas aparecen por ambigüedad de entrada o falta de contexto de zona horaria.
Si una fecha cambia de día al renderizar, revisa en qué zona se creó y en cuál se está mostrando. No es un bug aleatorio: es una conversión temporal.
Define convenciones de equipo (UTC en backend, locale en frontend, funciones compartidas) para evitar inconsistencias entre pantallas.