Cómo formatear horas como cortas, medianas, largas o completas

Introducción

Formatear horas requiere elegir qué componentes mostrar. Puedes mostrar horas y minutos para la hora de una 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 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 quieres horas numéricas, minutos numéricos y segundos numéricos, puedes solicitar timeStyle: "medium". En lugar de configurar la visualización de horas y minutos por separado, puedes solicitar timeStyle: "short".

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é es timeStyle

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 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 el idioma.

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.

Entendiendo los cuatro niveles de estilo

Cada nivel de estilo representa un equilibrio diferente entre brevedad y detalle. Los estilos cortos minimizan el espacio mostrando solo los componentes esenciales. Los estilos completos maximizan la claridad incluyendo todos los componentes relevantes como nombres de zona horaria.

El estilo "short" produce una salida compacta mostrando horas y minutos. Omite segundos e información de zona horaria, haciéndolo adecuado para la mayoría de las necesidades cotidianas de visualización de tiempo.

El estilo "medium" añade segundos para proporcionar más precisión. Todavía omite información de zona horaria pero proporciona un tiempo exacto hasta el segundo.

El estilo "long" añade información abreviada de zona horaria. Incluye horas, minutos, segundos y un código corto de zona horaria 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 idioma. El inglés americano típicamente usa formato de 12 horas con AM/PM, mientras que el alemán usa formato de 24 horas. El nivel de detalle relativo permanece consistente en todos los idiomas.

Formatear horas con timeStyle

La opción timeStyle controla el formato de la 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, siendo 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 deletrea 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 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 hora entre locales

Cada locale formatea las horas 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: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 el formato de 12 horas con AM/PM. El alemán, francés y japonés utilizan el formato de 24 horas. El estilo largo añade información de zona horaria con el formato apropiado para cada locale.

Estas diferencias reflejan las convenciones de cada cultura para mostrar la hora. La API maneja estas variaciones automáticamente basándose en el identificador de locale.

Cuándo usar el estilo corto

El estilo corto funciona mejor para la mayoría de las visualizaciones cotidianas de hora. Muestra la información que los usuarios típicamente necesitan sin saturar la interfaz con segundos o detalles de zona horaria.

Utiliza 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 comprenden el contexto de la 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 la zona horaria se vuelve redundante.

Cuándo usar el estilo medio

El estilo medio proporciona precisión de segundo nivel 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.

Utiliza el estilo de tiempo medio cuando muestres marcas de tiempo precisas en registros de aplicaciones, 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 precisa de tiempo. La precisión de segundos ayuda a identificar patrones, medir duraciones y correlacionar eventos.

El estilo medio funciona bien cuando necesitas más detalle que el 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 desde el contexto de la aplicación.

Cuándo usar el estilo largo

El estilo largo añade información abreviada de zona horaria a la visualización del tiempo. Esto ayuda a los usuarios a entender cuándo ocurrieron o ocurrirán eventos en relación con su propia zona horaria.

Utiliza el estilo de tiempo largo cuando coordines a través de zonas horarias o cuando muestres tiempos que podrían interpretarse de manera diferente dependiendo de la ubicación del espectador. El código abreviado de zona horaria 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 el tiempo.

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 entender el tiempo en diferentes zonas horarias. El formato equilibra la claridad con la eficiencia de espacio.

Cuándo usar el estilo completo

El estilo completo produce la representación de tiempo más completa. Escribe el nombre completo de la zona horaria, eliminando toda ambigüedad sobre qué zona horaria representa el tiempo.

Utiliza el estilo de tiempo completo cuando muestres horas que necesiten máxima claridad. Deletrear el nombre completo de la zona horaria ayuda a los usuarios en diferentes regiones a entender 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 formales de programación se benefician de este nivel de detalle.

Los documentos legales sensibles al tiempo, registros oficiales y marcas de tiempo relacionadas con el cumplimiento utilizan el estilo completo para establecer información de tiempo inequívoca. El nombre completo de la zona horaria evita cualquier confusión sobre cuándo ocurrieron los eventos.

Entendiendo las restricciones

La opción timeStyle no puede usarse con opciones de componentes de tiempo individuales. Debes elegir entre usar preajustes de estilo o configurar componentes individualmente.

Esto no funcionará:

const formatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium",
  hour: "2-digit"  // Error: no se puede combinar
});

La opción timeStyle ya determina el formato de la hora. Agregar 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 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")));
// Output: "March 15, 2025 at 2:30:45 PM EST"

Formatear horas para la configuración regional del usuario

Utiliza 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));
// La salida varía según la configuración regional del usuario
// Para en-US: "2:30 PM"
// Para de-DE: "14:30"
// Para fr-FR: "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, {
  timeStyle: "medium"
});

Reutilizar formateadores para mejorar el rendimiento

Crear instancias de Intl.DateTimeFormat implica procesar datos de configuración regional y opciones. Cuando formatees múltiples horas 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));
});
// Salida:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

Este patrón mejora el rendimiento cuando se formatean arrays de horas o se muestran 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.

Utiliza estos preajustes en lugar de configurar manualmente los componentes individuales de tiempo. Los preajustes producen una salida apropiada para cada configuración regional sin requerir que entiendas 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 preestablecidos para mayor simplicidad o componentes individuales para un control más preciso.

Formatea las horas utilizando la configuración regional del usuario desde navigator.language para mostrar las horas según las expectativas de cada usuario. Reutiliza las instancias del formateador cuando formatees múltiples horas para obtener un mejor rendimiento.