Cómo formatear fechas en la configuración regional del usuario

Introducción

Las fechas se muestran de forma 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 desconocido genera confusión. Un usuario que ve 3/15/2025 cuando espera 15/03/2025 debe detenerse para descifrar 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 gestionar el formateo 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 configuración regional.

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

Diferentes regiones desarrollaron diferentes convenciones para escribir fechas. Estas convenciones reflejan prácticas históricas, sistemas educativos y preferencias culturales. Ningún formato único 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, incluidos el 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 configuraciones regionales también usan diferentes caracteres separadores. Los estadounidenses usan barras, los alemanes usan puntos y algunas configuraciones regionales 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 cumplir las expectativas del usuario tanto en el orden de los componentes como en las convenciones de formato específicas.

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 idioma 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));
// Output: "3/15/2025"

Esto crea un formateador para inglés estadounidense, que usa 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 en una cadena específica del idioma.

Formateo de la misma fecha para diferentes idiomas

Puedes formatear la misma fecha para diferentes idiomas cambiando el identificador de idioma pasado al constructor.

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

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

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

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

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

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

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

Formateo de fechas para el idioma del usuario

En lugar de codificar un idioma específico, puedes usar 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));
// Output varies by user's locale
// For en-US: "3/15/2025"
// For en-GB: "15/03/2025"
// For de-DE: "15.3.2025"
// For ja-JP: "2025/3/15"

Este enfoque muestra fechas según las expectativas de cada usuario sin requerir que seleccionen manualmente un idioma. El navegador proporciona la preferencia de idioma, y la API Intl aplica las convenciones de formato apropiadas.

También puede 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.

Comprender qué 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 formatea un objeto Date, la API lo convierte en una cadena según las convenciones de la configuración regional. 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. Las lecciones posteriores cubrirán cómo formatear fechas y horas juntas, o solo horas.

Crear fechas para formatear

Puede 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 usan el formato YYYY-MM-DD. Este formato es inequívoco y funciona de manera consistente en todas las configuraciones regionales y zonas horarias.

Formatear fechas desde marcas de tiempo

También puede crear objetos Date desde marcas de tiempo Unix. Una marca de tiempo Unix representa el número de milisegundos desde el 1 de enero de 1970 UTC.

const timestamp = 1710489600000; // March 15, 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 recibe marcas de tiempo de API, bases de datos u otros sistemas que representan fechas como números.

También puede pasar la marca de tiempo 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 marcas de tiempo. Use el enfoque que mejor se adapte a su código.

Formatear la fecha actual

Para formatear la fecha actual, crea 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));
// Output: "10/15/2025" (or current date when run)

También puedes pasar Date.now() directamente, que devuelve el timestamp actual como número.

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

console.log(formatter.format(Date.now()));
// Output: "10/15/2025" (or current date when run)

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 configuración regional y procesar opciones. Cuando necesites formatear múltiples fechas con la misma configuración regional y ajustes, crea el formateador una vez y reutilízalo.

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));
});
// Output:
// "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 al formatear arrays con cientos o miles de fechas.

Formateo de fechas en plantillas

Puedes usar Intl.DateTimeFormat en cualquier lugar donde muestres fechas a los usuarios. Esto incluye insertar fechas formateadas en plantillas HTML, mostrar fechas en tablas o mostrar timestamps 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. Puedes insertarlas en contenido de texto, atributos o cualquier otro contexto donde muestres información a los usuarios.