Cómo formatear horas como short, medium, long o full
Usa estilos de hora preestablecidos para controlar qué componentes de hora se muestran sin configurarlos individualmente
Introducción
Formatear horas requiere elegir qué componentes mostrar. Podrías mostrar horas y minutos para una hora de reunión, añadir segundos para una marca de tiempo precisa, o incluir información de zona horaria para coordinar entre regiones. Cada componente tiene sus propias opciones de formato. Configurar todas estas opciones individualmente crea código verboso y requiere entender qué combinaciones funcionan bien juntas.
El Intl.DateTimeFormat de JavaScript proporciona estilos preestablecidos que agrupan opciones de formato comunes en opciones simples. En lugar de especificar que quieres horas numéricas, minutos numéricos y segundos numéricos, puedes solicitar timeStyle: "medium". En lugar de configurar la visualización de hora y minuto por separado, puedes solicitar timeStyle: "short".
Estos preajustes funcionan en todas las configuraciones regionales. El mismo estilo produce una salida apropiada ya sea que estés formateando para inglés estadounidense, alemán, japonés o árabe. Esta lección explica qué proporciona cada nivel de estilo y cuándo usar cada uno.
Qué es timeStyle
La opción timeStyle controla cómo aparecen las horas. Afecta qué componentes de hora se muestran y qué tan detallados son. La opción acepta cuatro valores: "short", "medium", "long" y "full".
La opción proporciona un atajo para establecer múltiples opciones de formato a la vez. Cuando especificas un estilo, el formateador selecciona automáticamente valores apropiados para componentes como hora, minuto, segundo y nombre de zona horaria según la configuración regional.
const formatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "2:30 PM"
Esta única opción reemplaza lo que de otro modo requeriría establecer múltiples opciones de componentes individuales.
Comprender los cuatro niveles de estilo
Cada nivel de estilo representa un equilibrio diferente entre brevedad y detalle. Los estilos short minimizan el espacio mostrando solo componentes esenciales. Los estilos full maximizan la claridad incluyendo todos los componentes relevantes como nombres de zona horaria.
El estilo "short" produce una salida compacta que muestra horas y minutos. Omite los segundos y la información de zona horaria, lo que lo hace adecuado para la mayoría de las necesidades cotidianas de visualización de hora.
El estilo "medium" añade segundos para proporcionar más precisión. Todavía omite la información de zona horaria, pero proporciona el tiempo exacto hasta el segundo.
El estilo "long" añade información de zona horaria abreviada. Incluye horas, minutos, segundos y un código de zona horaria corto como PST o GMT.
El estilo "full" produce la representación más completa. Incluye todos los componentes de tiempo con la zona horaria escrita completamente, como Pacific Standard Time.
Los componentes exactos y el formato para cada estilo varían según el locale. El inglés americano normalmente utiliza el formato de 12 horas con AM/PM, mientras que el alemán utiliza el formato de 24 horas. El nivel de detalle relativo se mantiene consistente entre locales.
Formatear horas con timeStyle
La opción timeStyle controla el formato de hora. Cada nivel de estilo produce una salida diferente para la misma hora.
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, lo que lo hace el más compacto. El estilo medium añade segundos para mayor precisión. El estilo long incluye un código de zona horaria abreviado. El estilo full escribe el nombre completo de la zona horaria para máxima claridad.
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 utiliza formato corto. Esta combinación proporciona contexto de fecha detallado mientras mantiene 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"
Usar 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 hora según el idioma
Cada idioma formatea las horas según sus propias convenciones. El mismo estilo produce diferentes resultados para diferentes idiomas, pero el nivel de detalle relativo permanece consistente.
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 usa formato de 12 horas con AM/PM. El alemán, francés y japonés usan formato de 24 horas. El estilo largo añade información de zona horaria con formato apropiado para cada idioma.
Estas diferencias reflejan las convenciones de cada cultura para mostrar la hora. La API maneja estas variaciones automáticamente según el identificador de idioma.
Cuándo usar el estilo corto
El estilo corto funciona mejor para la mayoría de las visualizaciones de hora cotidianas. Muestra la información que los usuarios típicamente necesitan sin saturar la interfaz con segundos o detalles de zona horaria.
Usa el estilo de hora corto para mostrar horarios de reuniones, programación de citas o cualquier contexto donde la precisión a nivel de segundos sea innecesaria. La mayoría de los usuarios piensan en términos de horas y minutos en lugar de segundos exactos.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const meetings = [
{ title: "Team standup", time: new Date("2025-03-15T09:00:00") },
{ title: "Client call", time: new Date("2025-03-15T14:30:00") },
{ title: "Code review", time: new Date("2025-03-15T16:45:00") }
];
meetings.forEach(meeting => {
console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});
// Output:
// Team standup: 9:00 AM
// Client call: 2:30 PM
// Code review: 4:45 PM
Las aplicaciones de calendario, interfaces de programación y selectores de hora se benefician del estilo corto. El formato compacto mantiene las interfaces limpias mientras proporciona toda la información que los usuarios necesitan para entender cuándo ocurren los eventos.
El estilo corto asume que los usuarios entienden el contexto de zona horaria. Cuando todos los usuarios operan en la misma zona horaria o cuando la aplicación maneja la conversión de zona horaria de forma transparente, la visualización explícita de zona horaria se vuelve redundante.
Cuándo usar el estilo medio
El estilo medio proporciona precisión a nivel de segundos mientras mantiene la información de zona horaria implícita. Esto lo hace adecuado para contextos donde el tiempo exacto importa pero la zona horaria se entiende por el contexto.
Usa el estilo de hora medio al mostrar marcas de tiempo precisas en registros de aplicación, feeds de actividad o pistas de auditoría. Estos contextos se benefician de saber exactamente cuándo ocurrieron las acciones hasta el segundo.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "medium"
});
const activities = [
{ action: "User logged in", time: new Date("2025-03-15T09:15:23") },
{ action: "File uploaded", time: new Date("2025-03-15T09:18:47") },
{ action: "Settings updated", time: new Date("2025-03-15T09:22:11") }
];
activities.forEach(activity => {
console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});
// Output:
// User logged in: 9:15:23 AM
// File uploaded: 9:18:47 AM
// Settings updated: 9:22:11 AM
Las herramientas de desarrollo, interfaces de depuración y paneles de monitoreo de rendimiento utilizan el estilo medio para mostrar información de tiempo precisa. La precisión de segundos ayuda a identificar patrones, medir duraciones y correlacionar eventos.
El estilo medio funciona bien cuando necesitas más detalle del que proporciona el estilo corto, pero no necesitas la verbosidad de la información de zona horaria. La mayoría de los usuarios pueden inferir la zona horaria del contexto de la aplicación.
Cuándo usar el estilo largo
El estilo largo añade información de zona horaria abreviada a la visualización de la hora. Esto ayuda a los usuarios a comprender cuándo ocurrieron o ocurrirán los eventos en relación con su propia zona horaria.
Utiliza el estilo de hora largo cuando coordines entre zonas horarias o cuando muestres horas que podrían interpretarse de manera diferente según la ubicación del espectador. El código de zona horaria abreviado proporciona contexto sin ocupar espacio excesivo.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const events = [
{ name: "Webinar starts", time: new Date("2025-03-15T14:00:00") },
{ name: "Registration closes", time: new Date("2025-03-15T13:30:00") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.time)}`);
});
// Output:
// Webinar starts: 2:00:00 PM EST
// Registration closes: 1:30:00 PM EST
Las aplicaciones internacionales, herramientas de programación para equipos distribuidos y plataformas de coordinación de eventos se benefician del estilo largo. El código de zona horaria elimina la ambigüedad sobre qué zona horaria representa la hora.
Los sistemas de reserva de vuelos, aplicaciones de programación de conferencias y herramientas de trabajo remoto utilizan el estilo largo para ayudar a los usuarios a comprender la hora en diferentes zonas horarias. El formato equilibra claridad con eficiencia de espacio.
Cuándo usar el estilo completo
El estilo completo produce la representación de hora más completa. Escribe el nombre completo de la zona horaria, eliminando toda ambigüedad sobre qué zona horaria representa la hora.
Utiliza el estilo de hora completo cuando muestres horas que necesiten máxima claridad. Escribir el nombre completo de la zona horaria ayuda a los usuarios en diferentes regiones a comprender exactamente cuándo ocurre un evento.
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. Las invitaciones a reuniones internacionales, confirmaciones de eventos y comunicaciones de programación formal se benefician de este nivel de detalle.
Los documentos legales sensibles al tiempo, registros oficiales y marcas de tiempo relacionadas con el cumplimiento normativo utilizan el estilo completo para establecer información temporal inequívoca. El nombre completo de la zona horaria evita cualquier confusión sobre cuándo ocurrieron los eventos.
Comprender las restricciones
La opción timeStyle no se puede usar con opciones de componentes de tiempo individuales. Debes elegir entre usar estilos preestablecidos o configurar componentes individualmente.
Esto no funcionará:
const formatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium",
hour: "2-digit" // Error: cannot combine
});
La opción timeStyle ya determina el formato de la hora. Añadir una opción explícita hour crea un conflicto. La misma restricción se aplica a otras opciones de componentes como minute, second o timeZoneName.
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", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
console.log(formatter.format(new Date("2025-03-15T14:30:45")));
// Output: "02:30:45 PM"
Puedes usar dateStyle y timeStyle juntos porque controlan aspectos diferentes 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")));
// Output: "March 15, 2025 at 2:30:45 PM EST"
Formatear horas según la configuración regional del usuario
Usa las preferencias de idioma del navegador para formatear las horas 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, {
timeStyle: "short"
});
const time = new Date("2025-03-15T14:30:00");
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For fr-FR: "14:30"
También puedes pasar el array completo navigator.languages para habilitar el comportamiento de respaldo. El formateador usa la primera configuración regional que admite del array.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
timeStyle: "medium"
});
Reutilizar formateadores para mejorar el rendimiento
Crear instancias de Intl.DateTimeFormat implica procesar datos de configuración regional y opciones. Al formatear múltiples veces con la misma configuración, crea el formateador una vez y reutilízalo.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "short"
});
const times = [
new Date("2025-03-15T09:00:00"),
new Date("2025-03-15T14:30:00"),
new Date("2025-03-15T16:45:00")
];
times.forEach(time => {
console.log(formatter.format(time));
});
// Output:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"
Este patrón mejora el rendimiento al formatear arrays de horas o mostrar muchas marcas de tiempo en una interfaz de usuario.
Qué recordar
La opción timeStyle proporciona niveles de formato preestablecidos: "short", "medium", "long" y "full". Cada nivel representa un equilibrio diferente entre brevedad y detalle. Short muestra horas y minutos, medium añade segundos, long añade zona horaria abreviada y full incluye nombres completos de zona horaria.
Usa estos preajustes en lugar de configurar componentes de tiempo individuales manualmente. Los preajustes producen resultados apropiados para cada configuración regional sin requerir que comprendas las reglas de formato específicas de cada región.
Puedes usar timeStyle con dateStyle pero no puedes combinarlo con opciones de componentes individuales como hour o minute. Elige entre estilos preajustados para mayor simplicidad o componentes individuales para un control más detallado.
Formatea las horas usando la configuración regional del usuario desde navigator.language para mostrar las horas según las expectativas de cada usuario. Reutiliza instancias del formateador al formatear múltiples horas para un mejor rendimiento.