Dentro de la página de plugins de jQuery existen varios que muestran un calendario para selccionar una fecha en un formulario. Pero he visto muy pocos (casi ninguno) que muestre un selector de hora, por ejemplo, para seleccionar un horario de trabajo. Y los que he visto tampoco es que sean muy interesantes (aunque es cierto que he visto uno muy bueno llamado NoGray Time Picker pero es con la librería Moo Tools).
Por eso, he hecho mi primer plugin para jQuery que es eso mismo, un selector de hora.
Mediante este plugin, en el input que esté activado, saldrá un selector con la hora actual en formato HH:MM donde, mediante la rueda del ratón, se podrá seleccionar una hora que se asignará automáticamente al input.
Este plugin require jQuery versión igual o mayor a la 1.2.6 y el plugin jQuery MouseWheel versión igual o mayor a la 3.0. Para instalarlo basta con incluir las siguientes líneas en el código HTML (en el mismo orden):
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.mousewheel.js”></script>
<script type=”text/javascript” src=”jquery.timepicker.js”></script>
Y para activarlo se usa el siguiente código:
<html>
[...]
<script type=”text/javascript”>
$(document).ready(function() {
$(“#timepicker”).timepicker();
});
</script>
[...]
<body>
[...]
<input type=”text” id=”timepicker” name=”timepicker” value=”" />
[...]
</body>
</html>
El id que se le asigna dentro del HTML es __timepicker con lo que se pueden usar hojas de estilo personalizadas.
El plugin está en la versión 0.1 y por dentro está bastante chapucero (es lo que hay 
) pero más o menos funciona tanto para Firefox en Windows y Linux como para Internet Explorer. Un problema que he detectado es que en IE versión 6 o menores no carga la hoja de estilos propia del TimePicker. Y un problema muy grave que no he corregido es que ¿qué pasa si tu ratón no tiene rueda? Pues que no puedes asignar la hora más que escribiéndola, por tanto el plugin no sirve para nada. A ver si soluciono esto de una forma elegante sin añadir las típicas flechitas de para arriba y para abajo. ¿Alguna sugerencia?
Podéis ver una demostración y, por supuesto, también podéis descargarlo en el siguiente enlace. Por supuesto que se agradece cualqueir comentario sobre todo de los que digan «¡Hey, que esto no va!»:
¡Hey, que esto no va!
Le doy con la ruedita y el contador de horas o minutos se vuelve loco…
De todas formas, yo soy de los que prefiere las flechas…
Joer, pero dime las condiciones… sistema operativo, navegador, donde tenías la otra mano,…
Es que esto es un poco jodio de hacer por culpa del IE que envía más eventos de la rueda del ratón de los que se le piden.
De todas formas, está en la versión 0.1. Supongo que en las siguientes irá mejor
.