ClockPicker para campos de entrada con Bootstrap y jQuery


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)

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

[/html]

Paso 2. – Si usas Bootstrap incluir el Framework.

[html]

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

[/html]

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

[html]

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

[/html]

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

[html]

<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>

[/html]

 

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

[javascript]

$(‘.clockpicker’).clockpicker();

[/javascript]

Utilizando jQuery sin Bootstrap.

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

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

[/html]

Paso 2. – Si no usas Bootstrap incluye este archivo

[html]

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

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

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

[/html]

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

[html]

<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>

[/html]

 

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

[javascript]

$(‘.clockpicker’).clockpicker();

[/javascript]

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

[adjuntos descripcion=”ClockPicker” link=”github.com/weareoutman/clockpicker/archive/gh-pages.zip”]