Formato de Hora usando JQuery

Hola a todos, hoy les traigo una funcionalidad de JQuery que les puede ser de gran utilidad si desean que los datos ingresados en un formulario estén con el debido formato.

Durante el desarrollo de un proyecto web en la universidad surgió la necesidad de formatear un campo input para que sólo acepte una hora válida (entre 00:00 y 23:59), buscando en la red encontré un plugin JQuery llamado "Masked Input Plugin", el cual obtuve en la siguiente página: http://digitalbush.com/projects/masked-input-plugin/.

Aclarar que este script es bastante limitado en el sentido de que no soporta expresiones regulares, sin embargo, es suficiente para cumplir la funcionalidad que se necesitaba. Específicamente yo requería que un campo de tipo input text solamente soportara el formato "xx:yy", donde xx serían las horas que posee un día (un número entre 0 y 23) e yy serían los minutos de una hora (un número entre 0 y 59).

Para lograr esto primero debemos agregar los siguientes script:

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

Ahora creamos el elemento input file que queremos formatear, para ello agregamos la siguiente línea al cuerpo del código HTML (notar que el identificador de este elemento es "hora_inicio"):

<input type="text" id="hora_inicio" name="hora_inicio" placeholder="Ejemplo: 12:30 pm"> 

Luego debemos agregar en alguna parte del script la siguiente porción de código, la cual formatea el elemento "hora_inicio":

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

El código anterior no es suficiente para aceptar sólo horas válidas, para ello necesitamos eliminar una porción de horas no válidas que están disponibles de ingresar por el usuario en este momento, por ejemplo, las 24:50. Para eliminar esto, debemos crear el siguiente función en javascript:

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

Ahora sólo debemos asociar la función creada "valida_hora()" con el elemento input file "hora_inicio" a través del evento onkeypress, es decir, se activará por cada tecleo que realice el usuario.

<input type="text" id="hora_inicio" name="hora_inicio" placeholder="Ejemplo: 12:30 pm" onkeypress="valida_hora(value)"> 

Al realizar todos los pasos nombrados, ya tendremos nuestro elemento input file formateado para aceptar sólo horas válidas.

Bueno, eso ha sido todo por hoy y nos vemos en la próxima entrada.