Mostrar la hora de forma más amigable con JavaScript

Nunca se me hubiese ocurrido intentar reescribir la forma en que mostramos una hora en particular, eso mismo es lo que intenta la biblioteca gratuita tidyTime.js.

tidyTime.js es una pequeña biblioteca JavaScript para mostrar la hora de forma más amigable, un detalle que bien puede ayudar a que nuestro sitio o aplicación web se encuentre más humanizada.

La idea de este proyecto es la de valerse de expresiones humanas para representar una hora en particular, por ejemplo:

16:33 se transforma en “Faltan 27 minutos para las 5. Vas a llegar tarde”

La biblioteca es muy simpática y los mensajes se pueden personalizar completamente, este aspecto es importante ya que podemos adecuar los textos para que se muestren de acuerdo al carácter de nuestro proyecto.

escribir hora con javascript

Personalizar hora en JavaScript:

Lo primero que hacemos es agregar la biblioteca de tidyTime.js a nuestro proyecto, también necesitamos tener jQuery instalado.

Luego creamos una div o span, en ella vamos a mostrar el mensaje:

<span class="tidyTime"></span>

Finalmente inicializamos el plugin:

$(document).ready(function ($) {

   $('.tidyTime').tidyTime();   

});

Eso es todo, al menos en su modo de uso básico. Existen también otras formas interesantes de inicializar el plugin, por ejemplo definiendo el horario en el que queremos comenzar:

$('.tidyTime').tidyTime({
        time: '08:15',
        before:'It\'s ',
        after:' and I\'m feeling good!',
        periodOfDay: true,
        callback:tidyTimeFunction
    });

La biblioteca también funciona como un simple reloj, en el apartado de Github del proyecto pueden ver un ejemplo de ello.

Esta clase de proyectos permite dar toques especiales a un diseño, además son muy fáciles de instalar y de personalizar. Al utilizar texto plano dentro de una div o span con tan solo agregar el elemento a nuestra hoja de estilo podremos definir la tipografía, color, tamaño, etc.

Web: tidyTime.js