jQuery timePicker
timePicker es un plugin de jQuery que nos permite tener un selector de horarios para un input o campo de texto.
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" />
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
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:»
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