Añadir un timepicker a un campo input mediante jQuery

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
    });
});

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP