# j-Period

> El componente para elegir un período de tiempo.

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

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.

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