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

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.

The post clockface un plugin para mostrar un reloj de selección de tiempo appeared first on Develoteca.