Cómo formatear fechas como cortas, medianas, largas o completas
Utiliza estilos preestablecidos de fecha y hora para controlar el detalle del formato sin configurar componentes individuales
Introducción
Formatear fechas requiere elegir qué componentes mostrar y cómo mostrarlos. Puedes mostrar el día de la semana, nombre del mes, número del día, año, horas, minutos y zona horaria. Cada componente tiene sus propias opciones de formato. Configurar todas estas opciones individualmente crea código extenso y requiere entender qué combinaciones funcionan bien juntas.
El Intl.DateTimeFormat de JavaScript proporciona estilos predefinidos que agrupan opciones de formato comunes en opciones simples. En lugar de especificar que deseas un mes numérico, día numérico y año numérico, puedes solicitar dateStyle: "short". En lugar de configurar la visualización de hora, minuto y segundo, puedes solicitar timeStyle: "medium".
Estos preajustes funcionan en todos los idiomas. El mismo estilo produce una salida apropiada ya sea que se formatee para inglés estadounidense, alemán, japonés o árabe. Esta lección explica lo que proporciona cada nivel de estilo y cuándo usar cada uno.
Qué son dateStyle y timeStyle
La opción dateStyle controla cómo aparecen las fechas. Afecta qué componentes de fecha se muestran y cuán detallados son. La opción acepta cuatro valores: "short", "medium", "long" y "full".
La opción timeStyle controla cómo aparecen las horas. Afecta qué componentes de tiempo se muestran y cuán detallados son. La opción acepta los mismos cuatro valores: "short", "medium", "long" y "full".
Ambas opciones proporcionan atajos para establecer múltiples opciones de formato a la vez. Cuando especificas un estilo, el formateador selecciona automáticamente valores apropiados para componentes como día de la semana, mes, día, año, hora, minuto, segundo y nombre de zona horaria según el idioma.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "short"
});
console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"
Esta única opción reemplaza lo que de otro modo requeriría configurar múltiples opciones de componentes individuales.
Entendiendo los cuatro niveles de estilo
Cada nivel de estilo representa un equilibrio diferente entre brevedad y detalle. Los estilos cortos minimizan el espacio omitiendo componentes y utilizando formatos numéricos. Los estilos completos maximizan la claridad incluyendo todos los componentes relevantes y escribiendo las palabras completas.
El estilo "short" produce una salida compacta adecuada para espacios reducidos. Normalmente utiliza formatos numéricos y omite información complementaria como los nombres de los días de la semana.
El estilo "medium" proporciona un detalle moderado. A menudo incluye nombres de meses abreviados y una precisión de tiempo equilibrada.
El estilo "long" añade más contexto. Generalmente escribe los nombres de los meses completamente e incluye componentes adicionales como información de zona horaria.
El estilo "full" produce la representación más completa. Incluye todos los componentes relevantes como nombres de días de la semana, nombres completos de meses y nombres completos de zonas horarias.
Los componentes exactos y el formato para cada estilo varían según la configuración regional. El inglés americano puede mostrar los meses de manera diferente que el alemán o el japonés, pero el nivel de detalle relativo se mantiene consistente en todas las configuraciones regionales.
Formatear fechas con dateStyle
La opción dateStyle controla el formato de la fecha. Cada nivel de estilo produce una salida diferente para la misma fecha.
const date = new Date("2025-03-15T14:30:00");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "3/15/25"
console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"
console.log(longFormatter.format(date));
// Output: "March 15, 2025"
console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"
El estilo corto utiliza valores totalmente numéricos, haciéndolo el más compacto. El estilo medio abrevia el nombre del mes. El estilo largo escribe el mes completamente. El estilo completo añade el nombre del día de la semana para un contexto completo.
Formatear horas con timeStyle
La opción timeStyle controla el formato de la hora. Cada nivel de estilo muestra diferentes componentes de tiempo.
const date = new Date("2025-03-15T14:30:45");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "2:30 PM"
console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"
console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"
console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"
El estilo short muestra solo horas y minutos. El estilo medium añade segundos. El estilo long incluye la zona horaria abreviada. El estilo full escribe el nombre completo de la zona horaria.
Combinar dateStyle y timeStyle
Puedes usar ambas opciones juntas para formatear marcas de tiempo completas. El formateador aplica ambos estilos de forma independiente.
const date = new Date("2025-03-15T14:30:45");
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "short"
});
console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"
La fecha aparece con formato largo mientras que la hora usa formato corto. Esta combinación proporciona un contexto detallado de la fecha manteniendo la hora concisa.
Puedes mezclar cualquier estilo de fecha con cualquier estilo de hora según tus necesidades.
const date = new Date("2025-03-15T14:30:45");
const combinations = [
{ dateStyle: "short", timeStyle: "short" },
{ dateStyle: "medium", timeStyle: "medium" },
{ dateStyle: "long", timeStyle: "long" },
{ dateStyle: "full", timeStyle: "full" }
];
combinations.forEach(options => {
const formatter = new Intl.DateTimeFormat("en-US", options);
console.log(formatter.format(date));
});
// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
Utilizar niveles de estilo coincidentes produce un detalle consistente tanto en la fecha como en la hora. Mezclar estilos te permite enfatizar un aspecto sobre el otro.
Cómo varían los estilos de fecha entre locales
Cada locale formatea las fechas según sus propias convenciones. El mismo estilo produce diferentes resultados para diferentes locales, pero el nivel relativo de detalle se mantiene consistente.
const date = new Date("2025-03-15T14:30:00");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: "short"
});
const fullFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: "full"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Full: ${fullFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 3/15/25
// Full: Saturday, March 15, 2025
// de-DE:
// Short: 15.03.25
// Full: Samstag, 15. März 2025
// fr-FR:
// Short: 15/03/2025
// Full: samedi 15 mars 2025
// ja-JP:
// Short: 2025/03/15
// Full: 2025年3月15日土曜日
El inglés americano utiliza el orden mes/día/año. El alemán utiliza día.mes.año con puntos como separadores. El francés utiliza día/mes/año. El japonés utiliza año/mes/día con caracteres kanji. El estilo completo añade los nombres de los días de la semana en cada idioma con el formato apropiado.
Cómo varían los estilos de hora entre locales
El formato de hora también se adapta a las convenciones de cada locale. Algunos locales utilizan relojes de 12 horas con indicadores AM/PM, mientras que otros utilizan relojes de 24 horas.
const date = new Date("2025-03-15T14:30:45");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "short"
});
const longFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Long: ${longFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 2:30 PM
// Long: 2:30:45 PM PST
// de-DE:
// Short: 14:30
// Long: 14:30:45 PST
// fr-FR:
// Short: 14:30
// Long: 14:30:45 UTC−8
// ja-JP:
// Short: 14:30
// Long: 14:30:45 PST
El inglés americano utiliza formato de 12 horas con AM/PM. El alemán, francés y japonés utilizan formato de 24 horas. El estilo largo añade información de zona horaria con el formato apropiado para cada locale.
Cuándo usar el estilo corto
El estilo corto funciona mejor cuando el espacio es limitado o cuando las fechas necesitan ajustarse a diseños compactos. Las interfaces móviles, tablas de datos y pantallas compactas se benefician del formato de fecha mínimo.
Utiliza el estilo de fecha corto para mostrar fechas en columnas de tablas, elementos de lista o en cualquier lugar donde el espacio horizontal esté limitado. El formato numérico ocupa menos caracteres que los nombres de meses completos o los nombres de días de la semana.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "short"
});
const events = [
{ name: "Team meeting", date: new Date("2025-03-15") },
{ name: "Project deadline", date: new Date("2025-03-28") },
{ name: "Conference", date: new Date("2025-04-05") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.date)}`);
});
Utiliza el estilo de hora corto para mostrar horas en horarios, calendarios o en cualquier lugar donde la precisión al segundo no sea necesaria. La mayoría de los contextos solo necesitan horas y minutos.
Cuándo usar el estilo medio
El estilo medio equilibra el detalle y el espacio. Proporciona más contexto que el estilo corto sin la verbosidad de los estilos largo o completo. Esto lo hace adecuado para la mayoría de las visualizaciones de fecha y hora de uso general.
Utiliza el estilo de fecha medio cuando tengas un espacio moderado y quieras que las fechas sean más legibles que los formatos puramente numéricos. Los nombres de mes abreviados ayudan a los usuarios a identificar los meses más rápidamente que los números.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "medium"
});
const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"
Utiliza el estilo de hora medio cuando necesites precisión de segundos pero quieras mantener las zonas horarias implícitas. Esto funciona para mostrar marcas de tiempo precisas en registros de aplicaciones o feeds de actividad donde los usuarios comprenden el contexto de la zona horaria.
Cuándo usar el estilo largo
El estilo largo proporciona detalles adicionales sin llegar a ser tan detallado como el estilo completo. Muestra la información de forma completa mientras omite componentes suplementarios como los nombres de los días de la semana.
Utiliza el estilo de fecha largo para fechas importantes que merecen énfasis o cuando quieres que las fechas se lean de forma más natural. Los nombres de los meses completamente escritos son más fáciles de escanear que las abreviaturas.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long"
});
const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"
Utiliza el estilo de hora largo cuando la información de zona horaria es importante. Esto ayuda a los usuarios a entender cuándo ocurrieron o ocurrirán los eventos en relación con su propia zona horaria.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"
Cuándo usar el estilo completo
El estilo completo produce la representación de fecha y hora más completa. Incluye todos los componentes relevantes, haciéndolo adecuado para contextos donde la claridad y la integridad importan más que la eficiencia del espacio.
Utiliza el estilo de fecha completo para mostrar fechas que necesitan el máximo contexto. Añadir el día de la semana ayuda a los usuarios a ubicar las fechas dentro del calendario semanal, lo que es útil para programar, planificar y entender relaciones temporales.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full"
});
const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"
Utiliza el estilo de hora completo cuando muestres horas que necesitan un contexto completo de zona horaria. Deletrear el nombre completo de la zona horaria elimina la ambigüedad para usuarios en diferentes regiones.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full",
timeStyle: "full"
});
const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
El estilo completo funciona bien para mostrar eventos importantes singulares, mensajes de confirmación o cualquier lugar donde los usuarios se beneficien de ver el contexto temporal completo.
Entendiendo las restricciones
Las opciones dateStyle y timeStyle no pueden utilizarse con opciones de componentes individuales. Debes elegir entre usar estilos predefinidos o configurar los componentes individualmente.
Esto no funcionará:
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium",
weekday: "long" // Error: no se pueden combinar
});
La opción dateStyle ya determina el formato del día de la semana. Añadir una opción explícita weekday crea un conflicto. La misma restricción se aplica a timeStyle con opciones de componentes como hour, minute o second.
Si necesitas más control sobre componentes específicos, omite las opciones de estilo y configura los componentes individualmente.
const formatter = new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
});
console.log(formatter.format(new Date("2025-03-15")));
// Salida: "Saturday, March 15, 2025"
Puedes usar dateStyle y timeStyle juntos porque controlan diferentes aspectos del formato. También puedes combinarlos con opciones que no entren en conflicto, como timeZone, calendar o numberingSystem.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "long",
timeZone: "America/New_York"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Salida: "March 15, 2025 at 2:30:45 PM EST"
Formatear fechas para la configuración regional del usuario
Utiliza las preferencias de idioma del navegador para formatear fechas según las expectativas de cada usuario. La propiedad navigator.language proporciona la configuración regional preferida del usuario.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long",
timeStyle: "short"
});
const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// La salida varía según la configuración regional del usuario
// Para en-US: "March 15, 2025 at 2:30 PM"
// Para de-DE: "15. März 2025 um 14:30"
// Para fr-FR: "15 mars 2025 à 14:30"
También puedes pasar todo el array navigator.languages para habilitar el comportamiento de respaldo. El formateador utiliza la primera configuración regional que admite del array.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
dateStyle: "medium"
});
Reutilizar formateadores para mejorar el rendimiento
Crear instancias de Intl.DateTimeFormat implica procesar datos de configuración regional y opciones. Cuando se formatean múltiples fechas con la misma configuración, crea el formateador una vez y reutilízalo.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "medium",
timeStyle: "short"
});
const events = [
new Date("2025-03-15T14:30:00"),
new Date("2025-03-16T10:00:00"),
new Date("2025-03-17T16:45:00")
];
events.forEach(date => {
console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"
Este patrón mejora el rendimiento cuando se formatean arrays de fechas o se muestran muchas marcas de tiempo en una interfaz de usuario.
Qué recordar
Las opciones dateStyle y timeStyle proporcionan niveles de formato preestablecidos: "short", "medium", "long" y "full". Cada nivel representa un equilibrio diferente entre brevedad y detalle, siendo short el más compacto y full el más completo.
Utiliza estos preajustes en lugar de configurar manualmente los componentes individuales de fecha y hora. Los preajustes producen una salida apropiada para cada configuración regional sin que necesites entender las reglas de formato específicas de cada localidad.
Puedes usar dateStyle y timeStyle juntos, pero no puedes combinarlos con opciones de componentes individuales como weekday u hour. Elige entre estilos preestablecidos para mayor simplicidad o componentes individuales para un control más preciso.
Formatea las fechas utilizando la configuración regional del usuario desde navigator.language para mostrar las fechas según las expectativas de cada usuario. Reutiliza las instancias del formateador cuando formatees múltiples fechas para obtener un mejor rendimiento.