ClockPicker mostrar la hora de manera familiar a un reloj

DESCARGA : ClockPicker

ClockPicker mostrar la hora de manera familiar a un reloj, ClockPicker  es un plugin de jquery que soporta varios dispositivos, además es compatible con Bootstrap, puedes tener múltiples formatos de tiempo como por ejemplo solo horas, minutos o segundos según lo que decidas y lo que requieras en la entrada de tiempo, la diferencia que tiene este plugin que maneja el tiempo con respecto a otros plugins es que: la interfaz es redonda no cuadrada lo que hace la presentación mucho más elegante y de formato entendible (reloj).

Este plugin maneja varias opciones en las que se pueden encontrar auto cerrado, alineación, funciones al seleccionar un dato, funciones de cerrado, entre otras.

La implementación es sencilla solo tienes que agregar los documentos css y js y los elementos donde se colocara el reloj.

Ejemplo también en jsfiddle: http://jsfiddle.net/weareoutman/YkvK9/


<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">

<div class="input-group clockpicker" data-placement="right" data-align="top" data-autoclose="true">

    <input type="text" class="form-control" value="09:32">

    <span class="input-group-addon">

        <span class="glyphicon glyphicon-time"></span>

    </span>

</div>

<input id="demo-input" />

<script type="text/javascript" src="assets/js/jquery.min.js"></script>

<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>

<script type="text/javascript">

$('.clockpicker').clockpicker()

    .find('input').change(function(){

        // TODO: time changed

        console.log(this.value);

    });

$('#demo-input').clockpicker({

    autoclose: true

});

if (something) {

    $('#demo-input').clockpicker('show') // Or hide, remove ...

            .clockpicker('toggleView', 'minutes');

}

</script>

Puedes ver la documentación y los ejemplos en la siguiente dirección:

Demostración:  http://weareoutman.github.io/clockpicker/

También puedes encontrar mucho más información en github: https://github.com/weareoutman/clockpicker

 

 

Puede interesarte