clockface un plugin para mostrar un reloj de selección de tiempo

Descarga : Archivo

clockface un plugin para mostrar un reloj de selección de tiempo, este es un timepicker para Twitter Bootstrap sencillo pero poderoso y fácil de implementar, este plugin tiene 3 formas de presentarse en forma de input, component y también inline a continuación te presentamos la forma de usar este plugin.

 

 

1.- Para usar input simplemente se realiza lo siguiente:

Código del input html

<input type="text" id="t1" value="2:30 PM" data-format="hh:mm A" class="input-small">

Código del plugin para jQuery

$(function(){
    $('#t1').clockface();  
});

2.- Para usar como componente se realiza lo siguiente:

Código del input html

<div class="input-append">
    <input type="text" id="t2" value="14:30" class="input-small" readonly="">
    <button class="btn" type="button" id="toggle-btn">
        <i class="icon-time"></i>
    </button>
</div>

Código del plugin para jQuery

$(function(){
    $('#t2').clockface({
        format: 'HH:mm',
        trigger: 'manual'
    });   
 
    $('#toggle-btn').click(function(e){   
        e.stopPropagation();
        $('#t2').clockface('toggle');
    });
});

3.- Para usar inline (reloj abierto)

Código del input html

<div id="t3" class="well" style="padding: 0; float: left"></div>

Código del plugin para jQuery

$(function(){
    $('#t3').clockface({
        format: 'H:mm'
    }).clockface('show', '14:30'); 
});

La url del sitio oficial es la siguiente: http://vitalets.github.io/clockface/index.html donde puedes encontrarte varios ejemplos y además un enlace de descarga de plugin, en la parte de documentación del plugin puedes encontrarte el uso de métodos, parámetros y eventos.

Contenido relacionado: