jQuery TimePicker
jQuery TimePicker es un plugin para jQuery que sirve para seleccionar la hora dentro de una caja de texto de un formulario (input). Esto se ha desarrollado porque existen multitud de selectores de calendario pero casi ninguno de hora. Incluso se podría mejorar para que fuese un selector de valores enteros dentro de cualquier caja de texto.
Su funcionamiento es básico: cuando una caja de texto recibe el foco, aparece debajo un selector con la hora actual. Las horas y minutos se pueden cambiar mediante la rueda del ratón. En cada cambio, la nueva hora se asignará a la caja de texto.
En caso de que la caja de texto tenga ya una hora escrita, el selector la mostrará. Si es una hora errónea, el selector mostrará la hora actual.
La versión es la 0.3 y no tiene soporte para la modificación de la hora si no es con la rueda del ratón en un input no editable (readonly="readonly") aunque siempre se puede escribir la hora directamente en una caja de texto editable.
Este plugin requiere 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({divId: “mytimepicker”});
});
</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. Este id se puede cambiar mediante la opción divId del propio plugin.
Este plugin está en la versión 0.3 20081123 y bajo licencia GPLv3. Si quieres puedes ver una demostración y también lo puedes descargar:
