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.
The post ClockPicker para campos de entrada con Bootstrap y jQuery appeared first on Develoteca.
