Merida Design Blog

Publicado el | Recursos / , ,

ClockPicker: Atractivo y amigable selector de hora con estilo de reloj

ClockPicker es un plugin que funciona con jQuery y Bootstrap, te permite añadir a tu aplicación o página web un popover con estilo de reloj para seleccionar la hora de manera mucho mas amigable.

Es compatible con todos los navegadores modernos y con internet explorer desde la versión 8. Funciona bien tanto en el escritorio como en dispositivos móviles.


Modo de uso

Dependiendo de si vas a incluir el plugin en un proyecto con Bootstrap o solamente con jQuery, debes incluir los archivos según sea el caso:

En ambos casos es necesario incluir jQuery.

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://weareoutman.github.io/clockpicker/dist/bootstrap-clockpicker.min.css">
    
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="http://weareoutman.github.io/clockpicker/dist/bootstrap-clockpicker.min.js"></script>
</head>

<body>
    <div class="input-group clock">
        <input type="text" class="form-control" value="" placeholder="Ahora">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
    </div>
    
    <script>
        $('.clock').clockpicker();
    </script>
</body>

Cuando se usa Bootstrap, el elemento para asignar el plugin debe ser el que contiene la clase input-group de Bootstrap.

<head>
    <link rel="stylesheet" href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css">
    
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
</head>

<body>
    <input type="text" value="" placeholder="Ahora" >
    
    <script>
        $('input').clockpicker();
    </script>
</body>

Cuando se usa solamente con jQuery, el elemento al que se le asigna el plugin, debe ser el input que va a recibir el valor.


Preferencias de configuración

El plugin ofrece bastante flexibilidad y control, desde el posicionamiento, hasta funciones que podemos ejecutar en respuesta a los eventos del plugin.

var $input = $('.clock').clockpicker({
    /**
     * Define el valor por defecto para la hora mostrada 
     * en el popover. Puede recibir como valor 'now' que 
     * lo configura automáticamente a la hora actual, o 
     * asignarle directamente una hora, ejemplo: '12:30'.
     * 
     * @param string 
     */
    default: 'now',
    
    /**
     * Define la posición del popover en relación al input
     * y puede recibir cualquiera de los siguientes valores:
     * -----------------------------------
     * 'top' | 'right' | 'bottom' | 'left'
     * -----------------------------------
     * 
     * @param string 
     */
    placement: 'bottom',
    
    /**
     * Define la posición de la flecha del popover y puede
     * recibir cualquiera de los siguientes valores:
     * -----------------------------------
     * 'top' | 'right' | 'bottom' | 'left'
     * -----------------------------------
     * 
     * @param string 
     */ 
    align: 'left',
    
    /**
     * Es el texto que se muestra en el botón para finalizar
     * con la selección de la hora. El botón no se muestra 
     * si la opción "autoclose" es true.
     * 
     * @param string 
     */
    donetext: 'Listo',
    
    /**
     * Determina si el popover debe cerrarse automáticamente
     * al terminar con la selección.
     * 
     * @param bool 
     */
    autoclose: false,
    
    /**
     * Si el valor es verdadero, cuando el popover se abra 
     * en un dispositivo móvil, éste vibrará al arrastrar 
     * el selector con los dedos.
     * 
     * @param bool 
     */
    vibrate: true,
    
    /**
     * Se asigna un valor en mili-segundos que se le añade a
     * la hora a mostrar por defecto en el popover, y solo
     * funciona si la opción 'default' es igual a 'now'.
     * 
     * @param number 
     */
    fromnow: 0,
    
    /**
     * Se ejecuta cuando el plugin es iniciado.
     * 
     * @param function 
     */
    init: function () { console.log('iniciado') },
    
    /**
     * Se ejecuta antes mostrar el popover.
     * 
     * @param function 
     */
    beforeShow: function () { console.log('antes de mostrarse') },
    
    /**
     * Se ejecuta después de mostrar el popover.
     * 
     * @param function 
     */
    afterShow: function () { console.log('después de mostrarse') },
    
    /** 
     * Se ejecuta antes de ocultar el popover.
     * 
     * @param function
     */
    beforeHide: function () { console.log('antes de ocultarse') },
    
    /**
     * Se ejecuta después de ocultar el popover
     * 
     * @param function 
     */
    afterHide: function () { console.log('después de ocultarse') },
    
    /**
     * Se ejecuta antes de establecer la hora.
     * 
     * @param function 
     */
    beforeHourSelect: function () { console.log('antes de seleccionar la hora') },
    
    /**
     * Se ejecuta después de establecer la hora.
     * 
     * @param function 
     */
    afterHourSelect: function () { console.log('después de seleccionar la hora') },
    
    /**
     * Se ejecuta ántes de completar la selección.
     * 
     * @param function 
     */
    beforeDone: function () { console.log('antes de finalizar') },
    
    /**
     * Se ejecuta después de completar la selección. 
     */
    afterDone: function () { console.log('después de finalizar') }
});

Demo

El siguiente es un demo usando bootstrap, en él puedes consultar como queda el código con todas las opciones de configuración y si le das click al enlace que se encuentra junto al logo (arriba a la izquierda) puedes editarlo y ver los resultados directamente.


Página: https://weareoutman.github.io/clockpicker/



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: