Cómo mostrar AM/PM o períodos del día específicos de cada configuración regional

Introducción

Cuando muestras una hora como 4:00, los usuarios necesitan contexto para saber si ocurre por la mañana o por la tarde. En inglés, se añade AM o PM para aclarar. Las 4:00 AM ocurren antes del amanecer, mientras que las 4:00 PM ocurren por la tarde.

Otros idiomas no simplemente traducen AM y PM. Muchas culturas dividen el día en más de dos períodos, con términos específicos para la madrugada, la mañana, la tarde, el atardecer y la noche. El español tiene "madrugada" para las horas después de la medianoche pero antes del amanecer. El alemán divide el día en seis períodos distintos en lugar de dos. Algunos idiomas llaman a la 1:00 AM "1 de la noche" en lugar de "1 de la mañana".

El Intl.DateTimeFormat de JavaScript proporciona la opción dayPeriod para mostrar estas divisiones de tiempo específicas de cada cultura automáticamente. Esta lección explica cómo funcionan los períodos del día en diferentes culturas, por qué son importantes para las aplicaciones internacionales y cómo formatear horas con etiquetas de período del día apropiadas.

Por qué los períodos del día varían según la cultura

Diferentes culturas desarrollaron diferentes formas de dividir el día de 24 horas en períodos con nombre. Estas divisiones reflejan cómo las personas en cada cultura piensan y hablan sobre el tiempo.

Los angloparlantes dividen el día en cuatro períodos. La mañana va desde la medianoche hasta el mediodía, la tarde desde el mediodía hasta el atardecer, el atardecer desde la tarde hasta que oscurece, y la noche desde que oscurece hasta la medianoche. Los términos AM y PM proporcionan un sistema más simple de dos períodos para el reloj de 12 horas.

Los hispanohablantes reconocen la "madrugada" como un período distinto que cubre las horas después de la medianoche pero antes de que las personas típicamente se despierten. Esto crea un sistema de cinco períodos que distingue entre las horas de la noche tardía y las horas de la mañana temprana.

Los hablantes de ruso usan "ночь" (noche) para referirse a cualquier hora en la que las personas suelen estar durmiendo. La 1:00 AM es "1 de la noche" en lugar de "1 de la mañana" porque normalmente las personas están durmiendo a esa hora.

El alemán divide el día en seis períodos. "Morgen" (mañana), "Vormittag" (media mañana), "Mittag" (mediodía), "Nachmittag" (tarde), "Abend" (noche) y "Nacht" (madrugada) cubren cada uno rangos específicos de horas.

El indonesio usa "pagi" (amanecer hasta las 10 AM), "siang" (10 AM a 2 PM), "sore" (2 PM hasta el atardecer) y "malam" (noche) para dividir el día en cuatro períodos basados en la posición del sol.

El bengalí divide el día en seis períodos. "ভোর" (amanecer), "সকাল" (mañana), "দুপুর" (primera tarde), "বিকাল" (última tarde), "সন্ধ্যা" (noche) y "রাত" (madrugada) tienen cada uno rangos de tiempo específicos.

Cuando muestras horas en una aplicación internacional, necesitas usar términos que coincidan con la forma en que los usuarios de cada cultura hablan naturalmente sobre el tiempo. Mostrar "4 AM" a todos los usuarios ignora cómo otros idiomas describen esa hora.

Comprender la opción dayPeriod

La opción dayPeriod en Intl.DateTimeFormat indica al formateador que incluya el período del día específico de la configuración regional al formatear una hora. En lugar de mostrar solo la hora y los minutos, el formateador añade el término apropiado para ese momento del día en el idioma de destino.

Esta opción funciona solo con formatos de hora de 12 horas. En formatos de 24 horas, el número de hora en sí proporciona suficiente contexto. Las 04:00 son claramente de la mañana y las 16:00 son claramente de la tarde sin etiquetas adicionales. Los períodos del día existen para desambiguar las horas repetidas en el formato de 12 horas.

La opción dayPeriod acepta tres valores. narrow produce la forma más corta posible, a menudo una sola letra o abreviatura. short produce una forma abreviada. long produce la palabra o frase completa.

Para muchos locales, estos tres valores producen una salida idéntica. Los datos de locale de Unicode no definen formas distintas para cada combinación de locale y longitud de formato. Cuando no existen formas distintas, el formateador utiliza la misma salida independientemente del valor que especifiques.

Formateando horas con períodos del día

Para mostrar un período del día, crea una instancia de Intl.DateTimeFormat con la opción dayPeriod establecida en narrow, short o long. También debes incluir una opción de componente de hora como hour y especificar un formato de 12 horas usando hourCycle.

const date = new Date('2025-01-15T04:30:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});

console.log(formatter.format(date));
// Output: "4:30 in the morning"

Esto crea un formateador que muestra la hora, los minutos y el período del día. La opción hourCycle: 'h12' especifica el formato de 12 horas, que es necesario para que aparezcan los períodos del día. La opción dayPeriod: 'long' solicita la frase completa del período del día.

Sin la opción dayPeriod, el formateador mostraría "4:30 AM" en su lugar. La opción de período del día reemplaza el simple indicador AM/PM con una frase más descriptiva.

Mostrando períodos del día en diferentes horas

Los períodos del día cambian según la hora que se esté formateando. El formateador selecciona automáticamente el período apropiado para cada hora según las convenciones del locale.

const options = {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
};

const formatter = new Intl.DateTimeFormat('en-US', options);

const morning = new Date('2025-01-15T04:30:00');
console.log(formatter.format(morning));
// Output: "4:30 in the morning"

const afternoon = new Date('2025-01-15T14:30:00');
console.log(formatter.format(afternoon));
// Output: "2:30 in the afternoon"

const evening = new Date('2025-01-15T20:30:00');
console.log(formatter.format(evening));
// Output: "8:30 in the evening"

const night = new Date('2025-01-15T23:30:00');
console.log(formatter.format(night));
// Output: "11:30 at night"

El inglés distingue entre mañana, tarde, noche y madrugada. Cada hora recibe la frase apropiada según la hora del día. No necesitas determinar qué período aplica. El formateador maneja esto automáticamente basándose en los datos de locale de Unicode.

Comparando formatos narrow, short y long

Las tres longitudes de formato producen salidas diferentes en algunos locales. Las diferencias varían según el idioma y pueden ser sutiles o inexistentes.

const date = new Date('2025-01-15T04:30:00');

const narrow = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'narrow'
});
console.log(narrow.format(date));
// Output: "4 in the morning"

const short = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'short'
});
console.log(short.format(date));
// Output: "4 in the morning"

const long = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(long.format(date));
// Output: "4 in the morning"

Para el inglés de EE. UU., las tres longitudes producen una salida idéntica. Los datos de locale no definen formas diferentes para esta combinación de idioma y hora.

Algunas configuraciones regionales sí distinguen entre longitudes. El francés produce diferentes salidas para los formatos reducido y largo.

const date = new Date('2025-01-15T04:30:00');

const frNarrow = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'narrow'
});
console.log(frNarrow.format(date));
// Output: "4 mat."

const frLong = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(frLong.format(date));
// Output: "4 du matin"

El francés usa "mat." como forma abreviada y "du matin" como forma larga. Ambas significan mañana, pero la forma larga es más explícita.

A menos que tengas restricciones de espacio específicas que requieran la salida más corta posible, usa long para mayor claridad. Las formas más largas son más fáciles de entender para los usuarios, y muchas configuraciones regionales no proporcionan alternativas más cortas de todos modos.

Cómo funcionan los períodos del día en diferentes idiomas

Diferentes configuraciones regionales utilizan diferentes términos para los períodos del día y dividen el día en límites diferentes. El formateador aplica automáticamente las convenciones para cada configuración regional.

const date = new Date('2025-01-15T04:30:00');
const options = {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
};

const enUS = new Intl.DateTimeFormat('en-US', options);
console.log(enUS.format(date));
// Output: "4 in the morning"

const enGB = new Intl.DateTimeFormat('en-GB', options);
console.log(enGB.format(date));
// Output: "4 at night"

const deDK = new Intl.DateTimeFormat('de-DE', options);
console.log(deDK.format(date));
// Output: "4 morgens"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date));
// Output: "4 du matin"

El inglés británico considera que las 4:30 AM es "at night" (por la noche) en lugar de "in the morning" (por la mañana), reflejando diferentes límites culturales para los períodos del día. El alemán usa "morgens" para las horas de la mañana. El francés usa "du matin" para el mismo período.

Estas diferencias no son errores ni inconsistencias. Reflejan diferencias culturales genuinas en cómo las personas conceptualizan y hablan sobre el tiempo. El formateador respeta estas diferencias automáticamente según la configuración regional.

Los períodos del día requieren formato de 12 horas

La opción dayPeriod solo funciona cuando especificas un formato de 12 horas usando hourCycle: 'h12' o hourCycle: 'h11'. Sin un formato de 12 horas, los períodos del día no aparecen.

const date = new Date('2025-01-15T04:30:00');

const with12Hour = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(with12Hour.format(date));
// Output: "4 in the morning"

const with24Hour = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h23',
  dayPeriod: 'long'
});
console.log(with24Hour.format(date));
// Output: "04"

El formato de 24 horas no muestra el período del día aunque la opción esté especificada. En el formato de 24 horas, el número de hora proporciona contexto suficiente sin etiquetas adicionales.

La diferencia entre h12 y h11 se relaciona con cómo se numeran la medianoche y el mediodía. Usa h12 para el reloj estándar de 12 horas donde las horas van de 1 a 12. Usa h11 para un sistema de horas de 0 a 11. Ambos funcionan con períodos del día.

Combinando períodos del día con minutos y segundos

Puedes incluir minutos y segundos junto con los períodos del día. El formateador posiciona el período del día apropiadamente según las convenciones de la configuración regional.

const date = new Date('2025-01-15T04:30:45');

const withMinutes = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(withMinutes.format(date));
// Output: "4:30 in the morning"

const withSeconds = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(withSeconds.format(date));
// Output: "4:30:45 in the morning"

El período del día aparece después de los componentes de tiempo. No necesitas posicionar o formatear manualmente el período del día. El formateador maneja la disposición según las convenciones de la configuración regional.

Formateando horas con períodos del día para la configuración regional del usuario

En lugar de codificar una configuración regional específica, utiliza el idioma preferido del usuario desde el navegador. La propiedad navigator.language devuelve la preferencia de idioma principal del usuario.

const date = new Date('2025-01-15T04:30:00');

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});

console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "4:30 in the morning"
// For en-GB: "4:30 at night"
// For de-DE: "4:30 morgens"
// For fr-FR: "4:30 du matin"

Este enfoque muestra las horas con períodos del día que coinciden con la forma natural en que cada usuario habla sobre el tiempo. El navegador proporciona la preferencia de idioma, y la API Intl aplica los términos y límites apropiados del período del día.

Cuándo usar períodos del día

Los períodos del día funcionan bien cuando deseas proporcionar más contexto que simples indicadores AM/PM. Hacen que las horas sean más conversacionales y más fáciles de interpretar de un vistazo.

Usa períodos del día en interfaces de usuario donde las horas aparecen junto con texto descriptivo. Un calendario que muestra "4:30 de la madrugada" es más claro que "4:30 AM" porque la frase suena más natural en el texto corrido.

Usa períodos del día en notificaciones y mensajes donde el lenguaje conversacional mejora la legibilidad. "Tu reunión comienza a las 8:30 de la noche" se lee mejor que "Tu reunión comienza a las 8:30 PM".

Evita los períodos del día en pantallas compactas donde el espacio es limitado. Las tablas, gráficos y diseños densos funcionan mejor con indicadores AM/PM estándar o formato de 24 horas.

Evita los períodos del día al mostrar horas en formato de 24 horas. El período del día no añade información útil cuando el número de hora ya indica el momento del día.

Resumen

La opción dayPeriod en Intl.DateTimeFormat muestra términos específicos de cada cultura para los momentos del día. Diferentes culturas dividen el día de manera distinta, usando términos como "madrugada" en español o seis períodos distintos en alemán en lugar de solo AM y PM.

La opción acepta tres valores. narrow produce la forma más corta, short produce una forma abreviada y long produce la frase completa. Muchos locales producen resultados idénticos para los tres valores.

Los períodos del día solo aparecen cuando se usa el formato de 12 horas especificado con hourCycle: 'h12' o hourCycle: 'h11'. No aparecen en el formato de 24 horas porque el número de hora proporciona suficiente contexto.

Diferentes locales utilizan diferentes términos para los períodos del día y establecen límites en horas distintas. El formateador aplica estas convenciones automáticamente según el identificador de locale. El inglés británico trata las 4:30 AM como "at night" mientras que el inglés americano lo trata como "in the morning".