# j-Period

> Die Komponente zum Auswählen eines Zeitraums.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: de
Content-SHA256: 3b54c294a3ac754240fd2c70e3f236eb36bd78bb4ee2a8af4ddb1b3ba770abef
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Die Komponente zum Auswählen eines Zeitraums.

- Singleton

__Methoden__:

Methode: `component.show(options)`

- `options.element` {Element/jQuery Element} - alle Alignment-Kalkulationen werden zu diesem Element relativ sein
- `options.align` Anpassung der Komponente in Bezug auf das Element in `options.element` Eigenschaft. Verfügbare Eigenschaften: 'Zentrum', 'Levend' und 'Richt'.
- `options.callback`-Funktion, die durch Klicken auf den "Anwendung" - erhalten zwei Parameter: Start und Enddatum Objekte
- `options.start`, `options.end` {Datum} - Um die ausgewählte Periode zu vordefinieren, sollte **beide** dieser Eigenschaften angegeben werden.


__Konfiguration__:

- `firstday` - {String} - Erlaubt, den ersten Tag der Woche auf Montag zu setzen. Der Standardwert ist 'Monday' - Tage der Woche beginnen von Montag.
- `dateformat` - {String} - Angibt das Datumformat. Der Standardwert - `DEF.dateformat`
- `apply` - {String} - Label für den "Anwendung" Button
- `cancel` - {String} - Label für die "annullieren" Button
- `custom` - {String} - Label für den "Custom" Filter-Taste
- `month` - {String} - Label für den "Filtermonat"
- `thisY` - {String} - Label für "Dieses Jahr" Filter-Taste
- `lastY` - {String} - Label für "Last Year" Filter Button

Verwenden Sie es mit `<ui-component name="period">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Kirill Zlobin. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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