jQuery timePicker

timePicker es un plugin de jQuery que nos permite tener un selector de horarios para un input o campo de texto.

timePicker

Para añadirlo a tus formularios tan solo tienes que añadir la librería jQuery, el plugin timePicker y su llamada. Además de los estilos necesarios que también los puedes localizar en el archivo de descarga.

<link rel="Stylesheet" type="text/css" href="css/timePicker.css"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="js/jquery.timePicker.js"></script>
<script type="text/javascript">
jQuery(function() {
    $("#time1").timePicker();
});
</script>

En este caso estamos haciendo una llamada básica al plugin timePicker sin parámetros. El plugin dispone de varios parámetros, entre ellos:

startTime: "02.00",  //Indica que la fecha de inicio es a las 2h
endTime: new Date(0, 0, 0, 15, 30, 0),  //Indica que la fecha de fin es a las 15:30
show24Hours: false, //Formato de fechas AM y PM
separator:'.', //Separador de horas y minutos
step: 15 //Frecuencia de cada intervalo

Después tan solo falta añadir el input o campo de texto en nuestros formularios, como por ejemplo:

<input type="text" size="10" id="time1" autocomplete="off" />

Ver ejemplos en funcionamiento

Descargar

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!
(4 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

2 respuestas a “jQuery timePicker”

  1. Esteban dice:

    Hola
    Tengo una consulta con respecto al » step: » que seria la fecuencia de cada intervalo.
    Quiero darle un valor variable, no estático .
    Como podría capturar un value de un input=»Text» y darselo al «step:»

    • Jose Aguilar dice:

      Hola,

      Creando una variable en entorno javascript que capture el valor del tu input:

      var step = $(‘#inputId’).val();

      Y luego incrustar la variable en la llamada al plugin timePicker

      Espero sea funcional,
      saludos

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