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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(5 votos, promedio: 4 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Una respuesta a “Timedropper”

  1. 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 una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre