Timedropper

Timedropper es un plugin jQuery para disponer de un formato más atractivo de obtener o seleccionar una hora (datetimepicker) en un campo de texto en tus formularios.

Es un plugin muy liviano que se instala en 3 segundos.

En la cabecera de tu página tan solo debes añadir la hoja de estilos, la librería jQuery, el plugin y la llamada, como por ejemplo:

<link rel="stylesheet" type="text/css" href="timedropper.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="timedropper.js"></script>
<script>
$(document).ready(function(){
    $("#alarm").timeDropper();
});
</script>

En el cuerpo de la página <body> allí donde tengas tu formulario debes añadir el input que abrirá el calendario:

<input type="text" name="alarm" id="alarm" />

Obteniendo como resultado:

timedropper

Este plugin se puede personalizar un poco con diversas funciones como:

  • Cambio automático de hora y minuto
  • Establecer el tiempo en 12h o 24h
  • Indicar el formato de la hora
  • Etc.

Lo mejor del plugin es que en dispositivos pequeños como el móvil funciona perfectamente. Es Responsive Design.

Ver ejemplo en funcionamiento

Descargar Timedropper

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 3,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

One comment on “Timedropper

  • daniel dice:

    Estimado, te felicito por el review, estuve implementando una solución con el timepicker en una tablet con windows 8 pero me aparece nan al poner el dedo y mover la hora o los minutos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*