jQuery Timepicker ayuda al usuario a seleccionar una hora concreta sin necesidad de que la escriban manualmente. Por regla general, se suele utilizar junto a un datepicker para que el usuario pueda introducir una fecha y una hora en un formulario. En este tutorial veremos cómo añadir un timepicker a un campo input con jQuery.
El plugin jQuery Timepicker mejora un campo haciendo que sea sencillo introducir una hora siempre bajo un mismo formato. Puedes convertir cualquier campo de un formulario en un timepicker de forma sencilla. Incluyendo jQuery Timepicker, aparecerá un desplegable en el campo input que designemos para ello en donde el usuario podrá escoger una hora concreta (hora, minutos, segundos).
El plugin jQuery Timepicker
Incluye la librerÃa jQuery y timepicker para utilizar el plugin Timepicker.
<!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jQuery timepicker library --> <link rel="stylesheet" href="jquery-timepicker/jquery.timepicker.min.css"> <script src="jquery-timepicker/jquery.timepicker.min.js"></script>
Añade Timepicker a un campo input
Funcionalidad básica
Este ejemplo añade un timepicker sencillo a un campo input.
Codigo HTML
Cuando se haga focus sobre el campo input, se abrirá el desplegable para que el usuario pueda seleccionar la hora.
<input type="text" id="time"/>
Código Javascript
A continuación tendremos que especificar el ID del campo que queremos convertir en un timepicker.
$(document).ready(function(){ $('#time').timepicker(); });
Funcionalidad avanzada
A continuación te muestro algunas opciones de configuración que puedes utilizar en jQuery Timepicker.
Formato de hora
Por defecto, timepicker utiliza el formato h:mm. Con la opción timeFormat podemos cambiar el formato de tiempo según tus menesteres.
$(document).ready(function(){ $('#time').timepicker({ timeFormat: 'h:mm:ss p' }); });
Intervalos
Con la opción interval podemos separar los rangos de tiempo a seleccionar por el usuario según X minutos. La X es el valor a definir en la variable interval.
$(document).ready(function(){ $('#time').timepicker({ timeFormat: 'h:mm p', interval: 15, }); });
Restringir un rango de tiempo
Por defecto, se puede seleccionar cualquier hora, pero puedes restringir un rango de tiempo utilizando la opción minTime y maxTime.
$(document).ready(function(){ $('#time').timepicker({ timeFormat: 'h:mm p', interval: 15, minTime: '10', maxTime: '6:00pm', }); });
Hora de inicio
Utiliza la opción startTime para definir una hora de inicio en tu timepicker
$(document).ready(function(){ $('#time').timepicker({ timeFormat: 'h:mm p', interval: 15, minTime: '10', maxTime: '6:00pm', startTime: '10:00' }); });
Hora por defecto
Utiliza la opción defaultTime para especificar una hora por defecto en el campo input.
$(document).ready(function(){ $('#time').timepicker({ timeFormat: 'h:mm p', interval: 15, minTime: '10', maxTime: '6:00pm', startTime: '10:00', defaultTime: '11' }); });
Mostrar un scroll
Define la variable scrollbar a true si quieres mostrar un scroll en el desplegable.
$(document).ready(function(){ $('#time').timepicker({ timeFormat: 'h:mm p', interval: 15, minTime: '10', maxTime: '6:00pm', startTime: '10:00', defaultTime: '11', scrollbar: true }); });