Para utilizar jQuery Timepicker necesitarás incluir dos archivos: jquery.timepicker.min.js y jquery.timepicker.min.css. Entonces, asumiendo que tienes un elemento <input> en tu documento, con clase timepicker, puedes usar el código de la derecha (o el código de abajo, si estás leyendo en el móvil) para inicializar el plugin.

$(document).ready(function(){ $('input.timepicker').timepicker({});});

Instalación

El plugin está disponible en diferentes fuentes, ¡elige la que mejor vaya con tu proyecto!

npm

npm i jquery-timepicker

Bower

bower install jquery-timepicker-wvega --save

cdnjs

jQuery Timepicker está disponible en cdnjs. Para obtener una lista de todas las versiones y archivos disponibles, vaya a https://cdnjs.com/libraries/timepicker. Alternativamente, utilice el código siguiente para incluir sólo la hoja de estilos y el script necesarios en su sitio web.

Pegue el siguiente código dentro del elemento <head> de su página:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">

Pegue el siguiente código antes de la etiqueta </body>:

<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

Descarga

La última versión de jQuery Timepicker también está disponible para su descarga desde GitHub.

Configuración

JQuery Timepicker ofrece varias opciones de configuración. Utiliza la demo de abajo para ajustar su comportamiento a tus necesidades. Si está interesado en una descripción detallada de cada una de las opciones disponibles, vaya a la página de opciones.

 $('.timepicker').timepicker({ }); 

Ayuda &Informes de errores

Puede publicar informes de errores y sugerencias de características en GitHub.

Si tienes problemas con el plugin, por favor, publica una pregunta en Stack Overflow usando jquery y timepicker como etiquetas; yo o alguien de la comunidad seguramente te ayudaremos.

Tanto si envías un informe de errores como si pides ayuda en Stack Overflow, por favor, intenta incluir un ejemplo que demuestre tu problema.

Deja una respuesta

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