ClockPicker para campos de entrada con Bootstrap y jQuery

Descarga : ClockPicker

ClockPicker para campos de entrada con Bootstrap y jQuery, muchas veces tenemos que implementar un campo de entrada en HTML y necesitamos solicitar una hora determinada, es aquí donde entra este plugin llamado ClockPicker que funciona como un reloj seleccionador de hora, este se anexa a lado del input, donde el usuario puede dar clic y seleccionar una hora.

A continuación te mostramos la implementación:

Utilizando Bootstrap, jQuery.

Paso 1. – Necesitas incluir jQuery en tu proyecto (esto es esencial)

  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 

Paso 2. – Si usas Bootstrap incluir el Framework.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Paso 3.- Incluir los archivos siguientes, que son los del plugin (Están en el botón de descarga):

 <link href="clockpicker.css" rel="stylesheet" />
 <script src="clockpicker.js"></script>
 <link href="bootstrap-clockpicker.css" rel="stylesheet" />

Paso 4.- Crear un elemento HTML tipo Input con las siguiente característica.

 <div class="input-group clockpicker " data-autoclose="true">
 <span class="input-group-addon">
 <span class="glyphicon glyphicon-time"></span>
 </span>
 <input type="text" class="form-control" value="09:30" />
 </div>

 

Paso 5.- Crear el script que transforma el input en un reloj.

 $('.clockpicker').clockpicker();

Utilizando jQuery sin Bootstrap.

Paso 1. – Necesitas incluir jQuery en tu proyecto (esto es esencial)

  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 

Paso 2. – Si no usas Bootstrap incluye este archivo

<link href="standalone.css" rel="stylesheet" />

Paso 3.- Incluir los archivos siguientes, que son los del plugin (Están en el botón de descarga):

 <link href="clockpicker.css" rel="stylesheet" />
 <script src="clockpicker.js"></script>
 

Paso 4.- Crear un elemento HTML tipo Input con las siguiente característica.

 <div class="input-group clockpicker " data-autoclose="true">
 <span class="input-group-addon">
 <span class="glyphicon glyphicon-time"></span>
 </span>
 <input type="text" class="form-control" value="09:30" />
 </div>

 

Paso 5.- Crear el script que transforma el input en un reloj.

 $('.clockpicker').clockpicker();

En la siguiente dirección puedes ver el ejemplo: https://weareoutman.github.io/clockpicker/  y también puedes ver otras opciones.

Contenido relacionado: