# j-Period

> The component for picking a time period.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 189fe23bf900cdd3bc9fd779fddfb2e2b5f012d90e7508c4f7e657d3ea71f614
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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.

```html example.html
<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>
```