Cómo cambiar entre formato de 12 horas y 24 horas
Usa JavaScript para mostrar horas con AM/PM o en formato de 24 horas según las preferencias del usuario
Introducción
La hora se muestra de forma diferente en todo el mundo. Los estadounidenses suelen ver 2:30 PM, mientras que los alemanes ven 14:30, y ambos representan el mismo momento. Cuando muestras las horas en un solo formato, asumes que todos los usuarios siguen la misma convención.
Mostrar las horas en un formato desconocido crea fricción. Un usuario que espera 14:30 pero ve 2:30 PM debe convertir mentalmente la hora. Un usuario que espera 2:30 PM pero ve 14:30 enfrenta el mismo problema. Esta carga cognitiva se repite para cada hora mostrada en tu aplicación.
JavaScript proporciona la API Intl.DateTimeFormat para gestionar el formato de hora automáticamente. Esta lección explica por qué los formatos de hora varían, cómo la API controla la visualización de 12 horas frente a 24 horas, y cuándo anular los valores predeterminados de la configuración regional.
Por qué los formatos de hora varían según la configuración regional
Diferentes regiones desarrollaron distintas convenciones para mostrar la hora. Estas convenciones reflejan prácticas culturales, sistemas educativos y precedentes históricos. Ningún formato único es universal.
En Estados Unidos, Canadá, Australia y Filipinas, el formato de 12 horas con indicadores AM/PM es estándar. La hora de la tarde aparece como 2:30 PM.
En la mayor parte de Europa, América Latina y Asia, el formato de 24 horas es estándar. La misma hora aparece como 14:30 sin necesidad de indicador AM/PM.
Algunas regiones usan ambos formatos según el contexto. El Reino Unido usa el formato de 24 horas para horarios de transporte pero el formato de 12 horas para conversaciones cotidianas.
Cuando muestras horas, necesitas ajustarte a las expectativas del usuario para su región y contexto.
Qué significan los formatos de 12 horas y 24 horas
El formato de 12 horas divide el día en dos períodos de 12 horas. Las horas van del 12 al 11 y luego vuelven a empezar. El sistema utiliza AM (ante meridiem) para medianoche a mediodía y PM (post meridiem) para mediodía a medianoche. La medianoche comienza a las 12:00 AM y el mediodía ocurre a las 12:00 PM.
12:00 AM → midnight
1:00 AM → 1 hour after midnight
11:59 AM → 1 minute before noon
12:00 PM → noon
1:00 PM → 1 hour after noon
11:59 PM → 1 minute before midnight
El formato de 24 horas cuenta las horas de forma continua del 0 al 23. La medianoche comienza a las 00:00 y el día termina a las 23:59. No se necesita indicador AM/PM porque cada hora tiene un número único.
00:00 → midnight
01:00 → 1 hour after midnight
11:59 → 1 minute before noon
12:00 → noon
13:00 → 1 hour after noon
23:59 → 1 minute before midnight
Diferentes configuraciones regionales utilizan diferentes formatos de forma predeterminada. La API Intl.DateTimeFormat respeta estos valores predeterminados pero te permite anularlos cuando sea necesario.
Uso de la opción hour12 para controlar el formato de hora
La opción hour12 controla si se debe utilizar el formato de 12 horas. Establécela como true para el formato de 12 horas con AM/PM, o false para el formato de 24 horas.
const date = new Date('2025-03-15T14:30:00');
const format12 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true
});
const format24 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
console.log(format12.format(date));
// Output: "2:30 PM"
console.log(format24.format(date));
// Output: "14:30"
La opción hour12 anula el comportamiento predeterminado de la configuración regional. Aunque el inglés estadounidense normalmente utiliza el formato de 12 horas, establecer hour12: false fuerza el formato de 24 horas.
Debes incluir hour en las opciones o usar timeStyle para que la opción hour12 tenga efecto. Sin un componente de hora en la salida, la opción no tiene impacto.
Uso de la opción hourCycle para un control detallado
La opción hourCycle proporciona más control que hour12 al especificar exactamente cómo deben contarse las horas. Acepta cuatro valores: "h11", "h12", "h23" y "h24".
const date = new Date('2025-03-15T00:30:00'); // 12:30 AM
const h11 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h11'
});
const h12 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h12'
});
const h23 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h23'
});
const h24 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h24'
});
console.log(h11.format(date));
// Output: "0:30 AM"
console.log(h12.format(date));
// Output: "12:30 AM"
console.log(h23.format(date));
// Output: "00:30"
console.log(h24.format(date));
// Output: "24:30"
Cada valor de ciclo de hora produce una salida diferente para la misma hora. Las diferencias se hacen más evidentes a medianoche y al mediodía.
Comprensión de los cuatro valores de hourCycle
Los cuatro valores de hourCycle definen cómo se numeran las horas dentro de cada período.
El valor "h12" usa el formato de 12 horas con horas de 1 a 12. La medianoche aparece como 12:00 AM y el mediodía aparece como 12:00 PM. Este es el formato estándar de 12 horas utilizado en Estados Unidos.
El valor "h11" usa el formato de 12 horas con horas de 0 a 11. La medianoche aparece como 0:00 AM y el mediodía aparece como 0:00 PM. Este formato es menos común pero aparece en algunos contextos.
El valor "h23" usa el formato de 24 horas con horas de 0 a 23. La medianoche aparece como 00:00 y el día termina a las 23:59. Este es el formato estándar de 24 horas utilizado en la mayor parte de Europa y Asia.
El valor "h24" usa el formato de 24 horas con horas de 1 a 24. La medianoche aparece como 24:00 desde la perspectiva del día anterior. Este formato es poco común pero aparece en algunos contextos técnicos.
La mayoría de las aplicaciones usan "h12" para el formato de 12 horas o "h23" para el formato de 24 horas.
Comparación de horas a medianoche entre ciclos horarios
La medianoche demuestra las diferencias entre los valores de ciclo horario de forma más clara.
const midnight = new Date('2025-03-15T00:00:00');
const cycles = ['h11', 'h12', 'h23', 'h24'];
cycles.forEach(cycle => {
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: cycle
});
console.log(`${cycle}: ${formatter.format(midnight)}`);
});
// Output:
// h11: 0:00:00 AM
// h12: 12:00:00 AM
// h23: 00:00:00
// h24: 24:00:00
Los valores h12 y h23 producen las representaciones más familiares para sus respectivos formatos.
Comparación de horas al mediodía entre ciclos horarios
El mediodía también muestra cómo difieren los ciclos horarios.
const noon = new Date('2025-03-15T12:00:00');
const cycles = ['h11', 'h12', 'h23', 'h24'];
cycles.forEach(cycle => {
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hourCycle: cycle
});
console.log(`${cycle}: ${formatter.format(noon)}`);
});
// Output:
// h11: 0:00:00 PM
// h12: 12:00:00 PM
// h23: 12:00:00
// h24: 12:00:00
Nuevamente, h12 y h23 producen representaciones estándar mientras que h11 usa 0 para la hora del mediodía.
Cómo interactúan hour12 y hourCycle
Cuando especificas tanto hour12 como hourCycle, la opción hour12 tiene prioridad y la opción hourCycle se ignora.
const date = new Date('2025-03-15T14:30:00');
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true,
hourCycle: 'h23' // This is ignored
});
console.log(formatter.format(date));
// Output: "2:30 PM" (12-hour format from hour12: true)
La configuración hour12: true fuerza el formato de 12 horas, anulando la configuración hourCycle: 'h23' que normalmente produciría el formato de 24 horas.
En la práctica, usa hour12 para un control simple o hourCycle para un control preciso, pero no ambos juntos.
Respetar los valores predeterminados de la configuración regional
Cuando omites tanto hour12 como hourCycle, el formateador usa el formato de hora predeterminado de la configuración regional.
const date = new Date('2025-03-15T14:30:00');
const usFormatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const deFormatter = new Intl.DateTimeFormat('de-DE', {
hour: 'numeric',
minute: 'numeric'
});
const jpFormatter = new Intl.DateTimeFormat('ja-JP', {
hour: 'numeric',
minute: 'numeric'
});
console.log(usFormatter.format(date));
// Output: "2:30 PM" (US default: 12-hour)
console.log(deFormatter.format(date));
// Output: "14:30" (German default: 24-hour)
console.log(jpFormatter.format(date));
// Output: "14:30" (Japanese default: 24-hour)
La configuración regional de EE. UU. usa por defecto el formato de 12 horas, mientras que las configuraciones regionales alemana y japonesa usan por defecto el formato de 24 horas. Respetar estos valores predeterminados proporciona la experiencia más familiar para los usuarios de cada región.
Anular los valores predeterminados de la configuración regional
Puedes anular el formato de hora predeterminado de una configuración regional estableciendo explícitamente hour12 o hourCycle.
const date = new Date('2025-03-15T14:30:00');
// Force German locale to use 12-hour format
const de12 = new Intl.DateTimeFormat('de-DE', {
hour: 'numeric',
minute: 'numeric',
hour12: true
});
// Force US locale to use 24-hour format
const us24 = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
console.log(de12.format(date));
// Output: "2:30 PM"
console.log(us24.format(date));
// Output: "14:30"
Este enfoque funciona cuando necesitas aplicar un formato de hora específico independientemente de la configuración regional del usuario.
Cuándo respetar los valores predeterminados de la configuración regional
La mayoría de las aplicaciones deben respetar los valores predeterminados de la configuración regional. Los usuarios de cada región esperan que las horas aparezcan en su formato familiar. Anular estos valores predeterminados genera confusión.
Permite que el formateador use el formato de hora predeterminado de la configuración regional al mostrar horas a los usuarios en su propia región.
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric'
});
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 ja-JP: "14:30"
Este enfoque se adapta automáticamente a las expectativas de cada usuario sin requerir configuración.
Cuándo anular los valores predeterminados de la configuración regional
Anula los valores predeterminados de la configuración regional cuando tu aplicación requiera consistencia entre todos los usuarios. Los sistemas de transporte, las aplicaciones militares y las herramientas técnicas a menudo necesitan el formato de 24 horas independientemente de la configuración regional.
// Always use 24-hour format for flight times
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hour12: false
});
const departureTime = new Date('2025-03-15T14:30:00');
console.log(`Departure: ${formatter.format(departureTime)}`);
// Output: "Departure: 14:30" (for all locales)
Esto garantiza la consistencia al mostrar horas que los usuarios necesitan referenciar con precisión, como horarios, registros o marcas de tiempo.
También puedes anular los valores predeterminados cuando los usuarios seleccionen explícitamente una preferencia. Si tu aplicación ofrece una configuración para elegir entre el formato de 12 horas y el de 24 horas, usa esa preferencia en lugar del valor predeterminado de la configuración regional.
function formatTime(date, userPrefers24Hour) {
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hour12: !userPrefers24Hour
});
return formatter.format(date);
}
const time = new Date('2025-03-15T14:30:00');
console.log(formatTime(time, false));
// Output: "2:30 PM"
console.log(formatTime(time, true));
// Output: "14:30"
Este patrón respeta la elección del usuario mientras sigue localizando otros aspectos de la visualización de la hora, como los caracteres separadores y la dirección del texto.
Uso de hour12 con timeStyle
La opción hour12 funciona con los estilos preestablecidos de timeStyle. Esto te permite controlar el formato de hora mientras sigues utilizando estilos preestablecidos convenientes.
const date = new Date('2025-03-15T14:30:45');
const short12 = new Intl.DateTimeFormat('en-US', {
timeStyle: 'short',
hour12: true
});
const short24 = new Intl.DateTimeFormat('en-US', {
timeStyle: 'short',
hour12: false
});
const medium12 = new Intl.DateTimeFormat('en-US', {
timeStyle: 'medium',
hour12: true
});
const medium24 = new Intl.DateTimeFormat('en-US', {
timeStyle: 'medium',
hour12: false
});
console.log(short12.format(date));
// Output: "2:30 PM"
console.log(short24.format(date));
// Output: "14:30"
console.log(medium12.format(date));
// Output: "2:30:45 PM"
console.log(medium24.format(date));
// Output: "14:30:45"
Este enfoque simplifica el formateo al combinar estilos preestablecidos con control explícito del formato de hora.
Formateo de horas para múltiples configuraciones regionales
Cuando tu aplicación sirve a usuarios en múltiples regiones, formatea las horas según las convenciones de cada configuración regional.
const date = new Date('2025-03-15T14:30:00');
const locales = [
{ code: 'en-US', name: 'United States' },
{ code: 'en-GB', name: 'United Kingdom' },
{ code: 'de-DE', name: 'Germany' },
{ code: 'ja-JP', name: 'Japan' }
];
locales.forEach(locale => {
const formatter = new Intl.DateTimeFormat(locale.code, {
hour: 'numeric',
minute: 'numeric'
});
console.log(`${locale.name}: ${formatter.format(date)}`);
});
// Output:
// United States: 2:30 PM
// United Kingdom: 14:30
// Germany: 14:30
// Japan: 14:30
Cada configuración regional utiliza su formato preferido automáticamente. No necesitas saber qué regiones usan qué formato.
Verificación del ciclo de hora resuelto
Puedes verificar qué ciclo de hora utiliza realmente el formateador llamando a resolvedOptions().
const formatter = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric'
});
const options = formatter.resolvedOptions();
console.log(options.hourCycle);
// Output: "h12"
console.log(options.hour12);
// Output: true
Este método devuelve la configuración real que utiliza el formateador después de resolver todos los valores predeterminados de configuración regional y las opciones explícitas. El objeto devuelto incluye las propiedades hourCycle y hour12 cuando hay componentes de tiempo presentes.
Formateo de horas en plantillas
Puedes usar horas formateadas en cualquier lugar donde muestres información temporal a los usuarios. Esto incluye insertar horas en HTML, mostrar marcas de tiempo en registros o mostrar horarios.
const formatter = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric'
});
const meetingTime = new Date('2025-03-15T14:30:00');
const deadlineTime = new Date('2025-03-15T17:00:00');
document.getElementById('meeting').textContent = formatter.format(meetingTime);
document.getElementById('deadline').textContent = formatter.format(deadlineTime);
Las cadenas formateadas funcionan como cualquier otro valor de cadena. Puedes insertarlas en contenido de texto, atributos o cualquier contexto donde muestres información a los usuarios.
Qué recordar
Usa la opción hour12 para cambiar entre el formato de 12 horas y 24 horas. Establécela como true para el formato de 12 horas con AM/PM o false para el formato de 24 horas.
Usa la opción hourCycle para un control preciso sobre la numeración de horas. El valor "h12" proporciona el formato estándar de 12 horas y "h23" proporciona el formato estándar de 24 horas.
Respeta los valores predeterminados de configuración regional en la mayoría de las aplicaciones. Los usuarios esperan que las horas aparezcan en el formato familiar de su región. Anula los valores predeterminados solo cuando la consistencia entre todos los usuarios importe más que respetar las convenciones regionales.
Combina hour12 con los preestablecidos de timeStyle para controlar el formato de hora mientras utilizas estilos preestablecidos convenientes para otros componentes de tiempo.