¿Cómo puedo mostrar solo horas, minutos o segundos?
Utiliza las opciones hour, minute y second para mostrar componentes individuales de tiempo 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 usando estilos predefinidos como timeStyle: "short", obtienes un conjunto de componentes elegidos por la configuración regional. No puedes eliminar partes individuales o añadir otras específicas. Si el estilo corto incluye segundos pero solo quieres horas y minutos, el preset 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.
Entendiendo los componentes de tiempo
Un tiempo contiene tres componentes principales que puedes formatear de forma independiente.
La hora muestra qué hora del día. El minuto muestra qué minuto de la hora. El segundo muestra qué segundo del minuto.
Cada componente acepta valores de formateo 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 usa el formato de 12 horas con indicadores AM/PM. Otras configuraciones regionales usan 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 por separado. 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 parte 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 solo 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 el inglés americano, esto produce un separador de dos puntos con un indicador AM/PM.
No es necesario especificar el separador o 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 completa en la hora.
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 una hora completa 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 sigue produciendo 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 es más relevante 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 iniciales, produciendo valores como "8:5:3 AM". El formato 2-digit incluye ceros iniciales, produciendo "08:05:03 AM".
Utiliza 2-digit para minutos y segundos en la mayoría de los casos. Esto asegura un ancho y alineación consistentes en tablas, listas o visualizaciones de relojes digitales. Sin ceros iniciales, horas como "8:5 AM" se ven irregulares.
Para las horas, la elección depende de tu diseño. Los relojes digitales a menudo utilizan 2-digit para mantener consistencia. Las visualizaciones de texto suelen utilizar 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 utiliza el formato de 12 horas con indicadores AM/PM. Muchas otras configuraciones regionales utilizan 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 a 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.
Se especifican 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 los 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 utiliza dos puntos entre los componentes. El finlandés utiliza puntos. No se especifica el separador. El formateador elige el separador apropiado para cada configuración regional.
Cuándo utilizar componentes de tiempo individuales
Utilice componentes de tiempo individuales cuando los estilos de tiempo preestablecidos no se ajusten a sus necesidades.
Si desea horas y minutos pero no segundos, y el preajuste timeStyle: "short" incluye segundos para su configuración regional objetivo, 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 horario simplificado, utilice únicamente la opción hour.
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric'
});
Si necesita mostrar los segundos transcurridos en un temporizador o contador, utilice ú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 completa del tiempo y los estilos predefinidos funcionan para tu configuración regional, usa timeStyle en su lugar. Los estilos predefinidos son más simples y aseguran un formato consistente en todas las configuraciones regionales.
const formatter = new Intl.DateTimeFormat('en-US', {
timeStyle: 'short'
});
Esto elige automáticamente los componentes apropiados y el formato 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, apropiado para la configuración regional sin personalización.
Casos de uso comunes para partes específicas de tiempo
Muestra solo 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 los 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 segundos solos para temporizadores de cuenta regresiva que muestran los 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 preset 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: no se puede combinar
});
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 específicas de fecha y partes específicas de tiempo 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));
// Muestra la hora convertida a la zona horaria de Nueva York
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));
// La salida varía según la configuración regional del usuario
// Para en-US: "2:05 PM"
// Para de-DE: "14:05"
// Para ja-JP: "14:05"
Esto aplica automáticamente el formato de hora apropiado, separadores e indicadores AM/PM basados en 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. 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, {
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));
});
// Salida para en-US:
// "9:00 AM"
// "2:30 PM"
// "6: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
Las opciones hour, minute y second te permiten mostrar componentes específicos de tiempo en lugar de tiempos completos. Cada opción acepta valores numeric o 2-digit. El valor numeric omite los ceros iniciales. El valor 2-digit incluye los ceros iniciales.
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 cuando formatees múltiples horas para un mejor rendimiento.