j-Period

The component for picking a time period.

• singleton

Methods:

Method: component.show(options)

• options.element {Element/jQuery Element} - all allignment calculations will be relative to this element
• options.align Align the component relatively to the element in options.element property. Available properties: 'center', 'left' and 'right'. The default value - 'right'
• options.callback Function, which will be executed by clicking on 'Apply' button of the component - receives two parameters: start and end date objects
• options.start, options.end {Date} - In order to predifine selected period, both of these properties should be specified.

Configuration:

• firstday - {String} - Allows to set the first day of the week to Monday. The defaul value is 'monday' - Days of the week start from Monday. 'sunday' - days of the week start from Sunday.
• dateformat - {String} - Specifies the date format. The default value - DEF.dateformat
• apply - {String} - Label for "Apply" button
• cancel - {String} - Label for "Cancel" button
• custom - {String} - Label for "Custom" filter button
• month - {String} - Label for "Current month" filter button
• thisY - {String} - Label for "This year" filter button
• lastY - {String} - Label for "Last year" filter button

Use it with <ui-component name="period">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Kirill Zlobin. Source: the Componentator components repository, MIT license.

<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>