[JQuery]Enmascarar una Hora, con JQuery usando Masked Input Plugin

Primero nos descargamos las librerías necesarias,

1. JQuery
2. Masked Input Plugin (librerias del plugin para jquery).

Creamos una página HTML para probar el ejemplo (lo más sencillo posible).

Incluimos las librerías :

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/jquery.maskedinput.js"></script>

agregamos un input :

<input type="text"  id="time">

y agregamos nuestro script , donde estamos generando nuestras propias definiciones,

esto porque el pluging solo cuenta con 3 definiciones.

• 9 – para números del 0-9
• a – para letras de la A-Z y a-z
• * – para alfanuméricos

   jQuery(function($)
   {
      $.mask.definitions['H']='[012]';
      $.mask.definitions['N']='[012345]';
      $.mask.definitions['n']='[0123456789]';
      $("#time").mask("Hn:Nn:Nn");
    });

Solo que en este caso no estaría , totalmente validada porque se podriá dar el caso de una hora (24:50:10 ó 25:00:00) y eso no es correcto ! 🙂

Para solucionar esto se hace una función con la que se valida que sea correcta y la colocamos en el onblur del input.

<input type="text" id="time" onblur="valida(this.value);">

y la función seriá como esta.

function valida(valor)
{
   //que no existan elementos sin escribir
   if(valor.indexOf("_") == -1)
   {
      var hora = valor.split(":")[0];
      if(parseInt(hora) > 23 )
      {
           $("#time").val("");
      }
   }
}

y Listo 😀

el código del ejemplo esta en esta LIGA por si desean descargarla.

• jQuery
• Mascara input