Formato de horas en Javascript

Siguiendo con el conjunto de artículos que hablan de elementos de internacionalización, como el anterior donde hablábamos sobre cómo mostrar un número en Javascript según Locale, veremos en este cómo dar formato de horas en Javascript.

Crear una hora en Javascript

Lo primero que necesitamos es crear una hora en Javascript. Es decir, lo que entendemos por hora, minutos y segundo. Para ello utilizaremos el objeto Date, el cual volcaremos sobre una constante.

const fecha = new Date('2020-03-16 12:22:00');

Vemos que para ello hemos utilizado un formato con el día más la hora. Aunque podríamos haber creado el objeto Date tal cual, conteniendo de esa forma la fecha y hora actual de nuestro sistema.

Formato de horas con toLocaleTimeString()

Lo siguiente será utilizar el método .toLocaleTimeString(locale) el cual recibe una etiqueta BCP 47 con el locale. La estructura de estas etiquetas es que primero tienen dos caracteres indicando el idioma, seguidas de un guión y luego otros dos caracteres indicando el país o región a la que se hace referencia.

Así, por ejemplo tenemos:

• es-ES, para el castellano en España.
• ca-ES, para el catalán en España.
• en-EN, para el inglés en Reino Unido.
• en-US, para el inglés en Estados Unidos.
• fr-FR, para el francés en Francia
• …

Ahora, simplemente deberemos de invocar el método .toLocaleTimeString(locale) sobre la fecha que habíamos creado.

console.log(fecha.toLocaleTimeString('en-US'));
console.log(fecha.toLocaleTimeString('es-ES'));

Al ejecutar este código veremos que al indicar un locale americano, es decir en-US, el formato de la hora será de 1 a 12 indicando si es AM (ante-meridiem, antes del medio día) o PM (post-meridiem, después del medio día).

Si bien, en el caso del locale español, es-ES, veremos que el formato de la hora será de 24h representado por las horas de 0 a 23.

Así podemos comprobar que dependiendo de la localización la hora tendrá una representación diferente y que por lo tanto es muy importante el dar formato de horas en Javascript de una forma correcta.