¿Cómo muestro solo horas, minutos o segundos?
Utiliza las opciones hour, minute y second para mostrar componentes de tiempo individuales en Intl.DateTimeFormat
Introducción
Las visualizaciones de tiempo a menudo necesitan mostrar solo componentes específicos. Un widget de reloj podría mostrar solo horas y minutos sin segundos. Un temporizador de cuenta regresiva podría mostrar solo segundos. Una interfaz de programación podría mostrar solo la hora de una cita.
Cuando formateas tiempos utilizando estilos predefinidos como timeStyle: "short", obtienes un conjunto de componentes elegidos por la configuración regional. No puedes eliminar partes individuales ni agregar otras específicas. Si el estilo corto incluye segundos pero solo quieres horas y minutos, el estilo predefinido no funciona para tus necesidades.
El Intl.DateTimeFormat de JavaScript proporciona opciones individuales para cada componente de tiempo. Puedes especificar exactamente qué partes incluir y cómo formatear cada una. Esta lección explica cómo mostrar horas, minutos y segundos por separado o en combinaciones específicas.
Comprender los componentes de tiempo
Un tiempo contiene tres componentes principales que puedes formatear de forma independiente.
El hour muestra qué hora del día es. El minute muestra qué minuto de la hora es. El second muestra qué segundo del minuto es.
Cada componente acepta valores de formato que controlan cómo se muestra. Solo incluyes los componentes que necesitas en el objeto de opciones.
Formatear solo horas
La opción hour muestra el componente de hora. Acepta dos valores.
const time = new Date('2025-03-15T14:05:00');
const numeric = new Intl.DateTimeFormat('en-US', {
hour: 'numeric'
});
console.log(numeric.format(time)); // "2 PM"
const twoDigit = new Intl.DateTimeFormat('en-US', {
hour: '2-digit'
});
console.log(twoDigit.format(time)); // "02 PM"
El valor numeric muestra la hora sin ceros a la izquierda. El valor 2-digit muestra la hora con ceros a la izquierda cuando es necesario.
Para el inglés americano, el formateador utiliza el formato de 12 horas con indicadores AM/PM. Otras configuraciones regionales utilizan diferentes convenciones, que esta lección cubre más adelante.
Formatear solo minutos
La opción minute muestra el componente de minutos. Acepta dos valores.
const time = new Date('2025-03-15T14:05:00');
const numeric = new Intl.DateTimeFormat('en-US', {
minute: 'numeric'
});
console.log(numeric.format(time)); // "5"
const twoDigit = new Intl.DateTimeFormat('en-US', {
minute: '2-digit'
});
console.log(twoDigit.format(time)); // "05"
El valor numeric muestra el minuto sin ceros a la izquierda. El valor 2-digit muestra el minuto con ceros a la izquierda.
Mostrar solo minutos es menos común que mostrar horas o segundos solos. La mayoría de las visualizaciones de tiempo combinan minutos con horas.
Formatear solo segundos
La opción second muestra el componente de segundos. Acepta dos valores.
const time = new Date('2025-03-15T14:05:08');
const numeric = new Intl.DateTimeFormat('en-US', {
second: 'numeric'
});
console.log(numeric.format(time)); // "8"
const twoDigit = new Intl.DateTimeFormat('en-US', {
second: '2-digit'
});
console.log(twoDigit.format(time)); // "08"
El valor numeric muestra el segundo sin ceros a la izquierda. El valor 2-digit muestra el segundo con ceros a la izquierda.
Esto funciona bien para mostrar segundos transcurridos en un contador o mostrar la porción de segundos de una marca de tiempo.
Combinar horas y minutos
La mayoría de las visualizaciones de tiempo muestran tanto horas como minutos. Puedes combinar estas opciones en un único formateador.
const time = new Date('2025-03-15T14:05:00');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: '2-digit'
});
console.log(formatter.format(time)); // "2:05 PM"
El formateador añade automáticamente separadores y formato apropiados según la configuración regional. Para inglés americano, esto produce un separador de dos puntos con un indicador AM/PM.
No especificas el separador ni el orden. La configuración regional determina estos detalles.
Combinar horas, minutos y segundos
Puedes incluir los tres componentes de tiempo cuando necesites precisión temporal completa.
const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: '2-digit',
second: '2-digit'
});
console.log(formatter.format(time)); // "2:05:08 PM"
Esto produce un tiempo completo con horas, minutos y segundos. El formateador maneja todos los separadores y convenciones de formato.
Combinar horas y segundos sin minutos
También puedes combinar horas y segundos sin incluir minutos, aunque esto es poco común.
const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
second: '2-digit'
});
console.log(formatter.format(time)); // "2:08 PM"
El formateador aún produce una salida razonable incluso para combinaciones de componentes inusuales.
Elegir entre formato numérico y de 2 dígitos
La diferencia entre numeric y 2-digit importa más para valores de un solo dígito.
const earlyTime = new Date('2025-03-15T08:05:03');
const lateTime = new Date('2025-03-15T14:35:48');
const numericFormatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
const digitFormatter = new Intl.DateTimeFormat('en-US', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
console.log('Numeric:');
console.log(numericFormatter.format(earlyTime)); // "8:5:3 AM"
console.log(numericFormatter.format(lateTime)); // "2:35:48 PM"
console.log('2-digit:');
console.log(digitFormatter.format(earlyTime)); // "08:05:03 AM"
console.log(digitFormatter.format(lateTime)); // "02:35:48 PM"
El formato numeric omite los ceros a la izquierda, produciendo valores como "8:5:3 AM". El formato 2-digit incluye ceros a la izquierda, produciendo "08:05:03 AM".
Utilice 2-digit para minutos y segundos en la mayoría de los casos. Esto garantiza un ancho y alineación consistentes en tablas, listas o pantallas de reloj digital. Sin ceros a la izquierda, horas como "8:5 AM" se ven irregulares.
Para las horas, la elección depende de su diseño. Los relojes digitales a menudo usan 2-digit para mantener la consistencia. Las pantallas de texto a menudo usan numeric para una apariencia más natural.
Cómo varía el formato de hora según la configuración regional
Diferentes configuraciones regionales utilizan diferentes convenciones para mostrar las horas. El inglés americano usa el formato de 12 horas con indicadores AM/PM. Muchas otras configuraciones regionales usan el formato de 24 horas.
const time = new Date('2025-03-15T14:05:00');
const en = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: '2-digit'
});
console.log(en.format(time)); // "2:05 PM"
const de = new Intl.DateTimeFormat('de-DE', {
hour: 'numeric',
minute: '2-digit'
});
console.log(de.format(time)); // "14:05"
const fr = new Intl.DateTimeFormat('fr-FR', {
hour: 'numeric',
minute: '2-digit'
});
console.log(fr.format(time)); // "14:05"
const ja = new Intl.DateTimeFormat('ja-JP', {
hour: 'numeric',
minute: '2-digit'
});
console.log(ja.format(time)); // "14:05"
El inglés americano convierte el valor de 24 horas al formato de 12 horas y añade "PM". El alemán, francés y japonés utilizan el formato de 24 horas sin indicadores AM/PM.
Especificas las mismas opciones para todas las configuraciones regionales. El formateador aplica automáticamente el formato de hora apropiado según las convenciones de la configuración regional.
Cómo varían los separadores según la configuración regional
El separador entre componentes de tiempo también varía según la configuración regional.
const time = new Date('2025-03-15T14:05:08');
const options = {
hour: 'numeric',
minute: '2-digit',
second: '2-digit'
};
const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(time)); // "2:05:08 PM"
const fi = new Intl.DateTimeFormat('fi-FI', options);
console.log(fi.format(time)); // "14.05.08"
El inglés americano usa dos puntos entre componentes. El finlandés usa puntos. No especificas el separador. El formateador elige el separador apropiado para cada configuración regional.
Cuándo usar componentes de tiempo individuales
Utilice componentes de tiempo individuales cuando los estilos de tiempo predefinidos no coincidan con sus necesidades.
Si desea horas y minutos pero no segundos, y el preset timeStyle: "short" incluye segundos para su configuración regional de destino, especifique hour y minute individualmente.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: '2-digit'
});
Si necesita mostrar solo la hora para un reloj o calendario simplificado, utilice únicamente la opción hour.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric'
});
Si necesitas mostrar segundos transcurridos en un temporizador o contador, utiliza únicamente la opción second.
const formatter = new Intl.DateTimeFormat('en-US', {
second: '2-digit'
});
Cuándo usar estilos de tiempo en su lugar
Si necesitas una visualización de tiempo completa y los estilos preestablecidos funcionan para tu configuración regional, utiliza timeStyle en su lugar. Los estilos preestablecidos son más simples y garantizan un formato consistente entre configuraciones regionales.
const formatter = new Intl.DateTimeFormat('en-US', {
timeStyle: 'short'
});
Esto elige automáticamente los componentes y el formato apropiados sin requerir que especifiques opciones individuales.
Utiliza componentes de tiempo individuales cuando necesites un control preciso sobre qué partes aparecen. Utiliza estilos de tiempo cuando quieras un formato estándar y apropiado para la configuración regional sin personalización.
Casos de uso comunes para partes de tiempo específicas
Muestra únicamente las horas para interfaces de programación de citas donde el minuto exacto es menos importante o se maneja por separado.
const time = new Date('2025-03-15T14:00:00');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric'
});
console.log(`Meeting at ${formatter.format(time)}`);
// "Meeting at 2 PM"
Muestra horas y minutos para la mayoría de widgets de reloj y visualizaciones de tiempo donde la precisión de segundos es innecesaria.
const time = new Date('2025-03-15T14:05:00');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: '2-digit'
});
console.log(formatter.format(time));
// "2:05 PM"
Muestra únicamente los segundos para temporizadores de cuenta regresiva que muestran segundos transcurridos.
const time = new Date('2025-03-15T00:00:45');
const formatter = new Intl.DateTimeFormat('en-US', {
second: '2-digit'
});
console.log(`${formatter.format(time)} seconds remaining`);
// "45 seconds remaining"
Muestra horas, minutos y segundos para marcas de tiempo precisas en registros o pistas de auditoría.
const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: '2-digit',
second: '2-digit'
});
console.log(`Event logged at ${formatter.format(time)}`);
// "Event logged at 2:05:08 PM"
Restricciones al usar componentes individuales
No puedes combinar opciones de componentes de tiempo individuales como hour, minute o second con la opción timeStyle. El preajuste timeStyle ya determina qué componentes aparecen y cómo se formatean.
Esto no funcionará:
const formatter = new Intl.DateTimeFormat('en-US', {
timeStyle: 'short',
second: '2-digit' // Error: cannot combine
});
Elige entre usar estilos de tiempo o configurar componentes individuales. No puedes usar ambos.
Puedes combinar opciones de componentes de tiempo con opciones de componentes de fecha. Esto te permite mostrar partes de fecha específicas y partes de tiempo específicas juntas.
const formatter = new Intl.DateTimeFormat('en-US', {
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit'
});
const datetime = new Date('2025-03-15T14:05:00');
console.log(formatter.format(datetime));
// "Mar 15, 2:05 PM"
También puedes combinar componentes de tiempo con opciones como timeZone, calendar o numberingSystem.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: '2-digit',
timeZone: 'America/New_York'
});
const time = new Date('2025-03-15T14:05:00Z');
console.log(formatter.format(time));
// Displays time converted to New York timezone
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.
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: '2-digit'
});
const time = new Date('2025-03-15T14:05:00');
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:05 PM"
// For de-DE: "14:05"
// For ja-JP: "14:05"
Esto aplica automáticamente el formato de hora apropiado, los separadores y los indicadores AM/PM según la configuración regional de cada usuario.
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, {
hour: 'numeric',
minute: '2-digit'
});
const times = [
new Date('2025-03-15T09:00:00'),
new Date('2025-03-15T14:30:00'),
new Date('2025-03-15T18:45:00')
];
times.forEach(time => {
console.log(formatter.format(time));
});
// Output for en-US:
// "9:00 AM"
// "2:30 PM"
// "6: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
Las opciones hour, minute y second te permiten mostrar componentes de tiempo específicos en lugar de horas completas. Cada opción acepta valores numeric o 2-digit. El valor numeric omite los ceros a la izquierda. El valor 2-digit incluye los ceros a la izquierda.
Puedes combinar múltiples opciones para mostrar exactamente los componentes que necesitas. El formateador maneja automáticamente los separadores, el orden y el formato según la configuración regional.
El formato de hora varía según la configuración regional. Algunas configuraciones regionales utilizan el formato de 12 horas con indicadores AM/PM. Otras utilizan el formato de 24 horas sin indicadores. Especificas las mismas opciones para todas las configuraciones regionales y el formateador aplica las convenciones apropiadas.
Utiliza componentes de tiempo individuales cuando necesites un control preciso sobre qué partes aparecen. Utiliza estilos de tiempo cuando quieras un formato estándar. No puedes combinar opciones de componentes individuales con opciones de estilo de tiempo.
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 al formatear múltiples horas para un mejor rendimiento.