# j-Period

> De component voor het kiezen van een tijdsperiode.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: nl
Content-SHA256: 529ac0cf77942b9f631f0196baad5b663ff7aeaed58ef7200623e6e80e3a1168
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

De component voor het kiezen van een tijdsperiode.

- Singleton

__Methoden__:

Methode: `component.show(options)`

- `options.element` {Element/jQuery Element} - alle alligament berekeningen zijn relatief aan dit element
- `options.align` Aanpassing van het onderdeel in relatie tot het element in de eigenschap van `options.element`. beschikbare eigenschappen: 'centrum', 'leven' en 'recht'.
- `options.callback` Functie, die wordt uitgevoerd door te klikken op de 'Apply' knop van de component - ontvangt twee parameters: start en einddatum objecten
- `options.start`, `options.end` {Date} - Om de geselecteerde periode te vooraf te bepalen, moeten **beide** van deze eigenschappen worden aangegeven.


__Configuratie__:

- `firstday` - {String} - Toegeeft de eerste dag van de week tot maandag.De standaardwaarde is 'maandag' - Dagen van de weken beginnen vanaf maandag."sunday" - dagen van deweek beginnen vanaf zondag.
- `dateformat` - {String} - Specificeert het datumformaat. de standaardwaarde - `DEF.dateformat`
- `apply` - {String} - Label voor de knop "Apply"
- `cancel` - {String} - Label voor de knop "Beroep"
- `custom` - {String} - Label voor "Custom" filterknop
- `month` - {String} - Label voor "Vandaagse maand" filterknop
- `thisY` - {String} - Label voor "Dit jaar" filterknop
- `lastY` - {String} - Label voor "Last Year" filterknop

Gebruik het met `<ui-component name="period">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator CDN door standaard). auteur: Kirill Zlobin. bron: de Componentator Componenten repository, MIT licentie.

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