j-Period

El componente para elegir un período de tiempo.

• singleton

Métodos:

Método: component.show(options)

• options.element {Elemento/Elemento jQuery} - todos los cálculos de alineación serán relativos a este elemento
• options.align Alinee el componente con respecto al elemento en la propiedad options.element. Propiedades disponibles: 'centro', 'izquierda' y 'derecha'. El valor predeterminado: 'derecho'
• options.callback Función, que se ejecutará al hacer clic en el botón 'Aplicar' del componente - recibe dos parámetros: objetos de fecha de inicio y finalización
• options.start, options.end {Fecha} - Para predefinir el período seleccionado, se deben especificar ambas propiedades.

Configuración:

• firstday - {String} - Permite establecer el primer día de la semana como lunes. El valor predeterminado es "lunes": los días de la semana comienzan a partir del lunes. 'domingo': los días de la semana comienzan desde el domingo.
• dateformat - {String} - Especifica el formato de fecha. El valor predeterminado: DEF.dateformat
• apply - {String} - Etiqueta para el botón "Aplicar"
• cancel - {String} - Etiqueta para el botón "Cancelar"
• custom - {String} - Etiqueta para el botón de filtro "Personalizado"
• month - {String} - Etiqueta para el botón de filtro "Mes actual"
• thisY - {String} - Etiqueta para el botón de filtro "Este año"
• lastY - {String} - Etiqueta para el botón de filtro "El año pasado"

Úselo con <ui-component name="period">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Kirill Zlobin. Fuente: repositorio de componentes Componentator, licencia MIT.

<ui-component name="LAZY period"></ui-component>

<button class="btn">Click</button>

<script>

    $(document).on('click', '.btn', function() {
        var opt = {};
        opt.element = $(this);
        opt.align = 'left';
        opt.callback = function(start, end) {
            console.log(start);
            console.log(end);
        };
        SETTER('period/show', opt);
    });


</script>