Cómo formatear fechas en el idioma del usuario

Utiliza JavaScript para mostrar fechas según las convenciones regionales de cada usuario

Introducción

Las fechas aparecen de manera diferente en todo el mundo. Los estadounidenses escriben el 15 de marzo de 2025 como 3/15/2025, mientras que los europeos escriben la misma fecha como 15/03/2025, y los usuarios japoneses esperan 2025/3/15. Cuando codificas un formato de fecha de forma fija, asumes que todos los usuarios siguen la misma convención.

Mostrar fechas en un formato poco familiar crea confusión. Un usuario que ve 3/15/2025 cuando espera 15/03/2025 debe detenerse para decodificar si la fecha representa el 15 de marzo o la fecha imposible del mes 15. Esta carga cognitiva se multiplica en cada fecha de tu aplicación.

JavaScript proporciona la API Intl.DateTimeFormat para manejar el formato de fechas automáticamente. Esta lección explica por qué los formatos de fecha varían entre culturas, cómo funciona la API y cómo formatear fechas correctamente para cualquier localización.

Por qué los formatos de fecha varían según la localización

Diferentes regiones desarrollaron diferentes convenciones para escribir fechas. Estas convenciones reflejan prácticas históricas, sistemas educativos y preferencias culturales. Ningún formato es universal.

En Estados Unidos, las fechas siguen el patrón mes-día-año. El 15 de marzo de 2025 aparece como 3/15/2025.

En la mayoría de los países europeos, incluyendo Reino Unido, Alemania, Francia y España, las fechas siguen el patrón día-mes-año. La misma fecha aparece como 15/03/2025.

En Japón, China y Corea, las fechas siguen el patrón año-mes-día. La fecha aparece como 2025/3/15.

Diferentes localizaciones también utilizan diferentes caracteres separadores. Los estadounidenses usan barras, los alemanes usan puntos, y algunas localizaciones usan guiones o espacios.

Los nombres de los meses también varían según el idioma. Marzo aparece como "March" en inglés, "März" en alemán, "mars" en francés, "marzo" en español y "3月" en japonés.

Cuando muestras fechas, necesitas adaptarte a las expectativas del usuario tanto en el orden de los componentes como en las convenciones específicas de formato.

Uso de Intl.DateTimeFormat para formatear fechas

El constructor Intl.DateTimeFormat crea un formateador de fechas que aplica convenciones específicas del idioma. Pasa un identificador de configuración regional como primer argumento, luego llama al método format() con un objeto Date.

const formatter = new Intl.DateTimeFormat('en-US');
const date = new Date('2025-03-15');
console.log(formatter.format(date));
// Resultado: "3/15/2025"

Esto crea un formateador para inglés estadounidense, que utiliza el patrón mes-día-año con barras. El método format() convierte el objeto Date en una cadena con el formato apropiado.

El constructor Date acepta una cadena de fecha ISO 8601 como 2025-03-15. Esto crea un objeto Date que representa el 15 de marzo de 2025 a medianoche UTC. El formateador luego convierte esto a una cadena específica del idioma.

Formateo de la misma fecha para diferentes configuraciones regionales

Puedes formatear la misma fecha para diferentes configuraciones regionales cambiando el identificador de configuración regional pasado al constructor.

const date = new Date('2025-03-15');

const usFormatter = new Intl.DateTimeFormat('en-US');
console.log(usFormatter.format(date));
// Resultado: "3/15/2025"

const gbFormatter = new Intl.DateTimeFormat('en-GB');
console.log(gbFormatter.format(date));
// Resultado: "15/03/2025"

const deFormatter = new Intl.DateTimeFormat('de-DE');
console.log(deFormatter.format(date));
// Resultado: "15.3.2025"

const jpFormatter = new Intl.DateTimeFormat('ja-JP');
console.log(jpFormatter.format(date));
// Resultado: "2025/3/15"

Cada formateador aplica diferentes convenciones. El formateador estadounidense utiliza mes-día-año con barras. El formateador británico utiliza día-mes-año con barras. El formateador alemán utiliza día-mes-año con puntos. El formateador japonés utiliza año-mes-día con barras.

No necesitas saber qué patrón o separadores utiliza cada configuración regional. La API maneja estos detalles automáticamente según el identificador de configuración regional.

Formateo de fechas para la configuración regional del usuario

En lugar de codificar una configuración regional específica, puedes utilizar el idioma preferido del usuario desde el navegador. La propiedad navigator.language devuelve la preferencia de idioma principal del usuario.

const userLocale = navigator.language;
const formatter = new Intl.DateTimeFormat(userLocale);
const date = new Date('2025-03-15');

console.log(formatter.format(date));
// El resultado varía según la configuración regional del usuario
// Para en-US: "3/15/2025"
// Para en-GB: "15/03/2025"
// Para de-DE: "15.3.2025"
// Para ja-JP: "2025/3/15"

Este enfoque muestra las fechas de acuerdo con las expectativas de cada usuario sin requerir que seleccionen manualmente una configuración regional. El navegador proporciona la preferencia de idioma, y la API Intl aplica las convenciones de formato apropiadas.

También puedes pasar el array completo de idiomas preferidos para habilitar el comportamiento de respaldo.

const formatter = new Intl.DateTimeFormat(navigator.languages);
const date = new Date('2025-03-15');
console.log(formatter.format(date));

La API utiliza la primera configuración regional que admite del array. Esto proporciona un mejor manejo de respaldo cuando la preferencia principal del usuario no está disponible.

Entendiendo lo que formatea la API

La API Intl.DateTimeFormat formatea objetos Date de JavaScript. Un objeto Date representa un momento específico en el tiempo, incluyendo la fecha, hora e información de zona horaria.

Cuando formateas un objeto Date, la API lo convierte en una cadena de texto según las convenciones del locale. Por defecto, la API formatea solo la parte de la fecha y omite la hora.

const formatter = new Intl.DateTimeFormat('en-US');

const dateWithTime = new Date('2025-03-15T14:30:00');
console.log(formatter.format(dateWithTime));
// Output: "3/15/2025"

El objeto Date incluye información de hora, pero el formateador predeterminado la ignora. En lecciones posteriores se cubrirá cómo formatear fechas y horas juntas, o solo horas.

Creando fechas para formatear

Puedes crear objetos Date de varias maneras. El enfoque más confiable es usar cadenas de fecha ISO 8601.

const date1 = new Date('2025-03-15');
const date2 = new Date('2025-12-31');
const date3 = new Date('2025-01-01');

const formatter = new Intl.DateTimeFormat('en-US');

console.log(formatter.format(date1));
// Output: "3/15/2025"

console.log(formatter.format(date2));
// Output: "12/31/2025"

console.log(formatter.format(date3));
// Output: "1/1/2025"

Las cadenas ISO 8601 utilizan el formato YYYY-MM-DD. Este formato es inequívoco y funciona de manera consistente en todos los locales y zonas horarias.

Formateando fechas desde timestamps

También puedes crear objetos Date a partir de timestamps Unix. Un timestamp Unix representa el número de milisegundos desde el 1 de enero de 1970 UTC.

const timestamp = 1710489600000; // 15 de marzo de 2025
const date = new Date(timestamp);

const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date));
// Output: "3/15/2025"

Este enfoque funciona cuando recibes timestamps de APIs, bases de datos u otros sistemas que representan fechas como números.

También puedes pasar el timestamp directamente al método format() sin crear primero un objeto Date.

const formatter = new Intl.DateTimeFormat('en-US');
const timestamp = 1710489600000;

console.log(formatter.format(timestamp));
// Output: "3/15/2025"

La API acepta tanto objetos Date como timestamps. Utiliza el enfoque que mejor se adapte a tu código.

Formateo de la fecha actual

Para formatear la fecha actual, cree un objeto Date sin argumentos. Esto crea un objeto Date que representa el momento actual.

const formatter = new Intl.DateTimeFormat('en-US');
const now = new Date();

console.log(formatter.format(now));
// Salida: "10/15/2025" (o la fecha actual cuando se ejecuta)

También puede pasar Date.now() directamente, que devuelve la marca de tiempo actual como un número.

const formatter = new Intl.DateTimeFormat('en-US');

console.log(formatter.format(Date.now()));
// Salida: "10/15/2025" (o la fecha actual cuando se ejecuta)

Ambos enfoques producen resultados idénticos.

Reutilización de formateadores para mejorar el rendimiento

Crear una nueva instancia de Intl.DateTimeFormat implica cargar datos de localización y procesar opciones. Cuando necesite formatear múltiples fechas con la misma configuración regional y ajustes, cree el formateador una vez y reutilícelo.

const formatter = new Intl.DateTimeFormat('en-US');

const dates = [
  new Date('2025-01-01'),
  new Date('2025-06-15'),
  new Date('2025-12-31')
];

dates.forEach(date => {
  console.log(formatter.format(date));
});
// Salida:
// "1/1/2025"
// "6/15/2025"
// "12/31/2025"

Este enfoque es más eficiente que crear un nuevo formateador para cada fecha. La diferencia de rendimiento se vuelve significativa cuando se formatean arrays con cientos o miles de fechas.

Formateo de fechas en plantillas

Puede utilizar Intl.DateTimeFormat en cualquier lugar donde muestre fechas a los usuarios. Esto incluye insertar fechas formateadas en plantillas HTML, mostrar fechas en tablas o mostrar marcas de tiempo en interfaces de usuario.

const formatter = new Intl.DateTimeFormat(navigator.language);

const publishedDate = new Date('2025-03-15');
const updatedDate = new Date('2025-04-20');

document.getElementById('published').textContent = formatter.format(publishedDate);
document.getElementById('updated').textContent = formatter.format(updatedDate);

Las cadenas formateadas funcionan como cualquier otro valor de cadena. Puede insertarlas en contenido de texto, atributos o cualquier otro contexto donde muestre información a los usuarios.