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. Los campos obligatorios están marcados con *

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

Ver más sobre