Artículos
Javascript

Formato de horas en Javascript

16/Mar/2020

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.

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('February 15, 2020 20:52:30 GMT+00: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.

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.

// El formato americano lo pondrá en AM/PM
console.log(fecha.toLocaleTimeString('en-US'));

// El formato español lo pondrá en un formato 24h
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.

Código Fuente

Descárgate el código fuente de Formato de horas en Javascript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
0 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios