ForgeComponentes
pt

Componentes

j-Period

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

O componente para escolher um período de tempo.

  • Singularidade

Métodos:

Método: component.show(options)

  • options.element {Elemento/jQuery Elemento} - todos os cálculos de alligamento serão relativos a este elemento
  • options.align Alinear o componente relativamente ao elemento na propriedade options.element. Propriedades disponíveis: 'centro', 'direita' e 'direito'.
  • options.callback Função, que será executada clicando no botão 'Aplique' do componente - recebe dois parâmetros: início e fim de data objetos
  • options.start, options.end {Data} - Para predefinir o período selecionado, ambas dessas propriedades devem ser especificadas.

Configuração:

  • firstday - {String} - Permite definir o primeiro dia da semana para segunda-feira.O valor padrão é 'Montês' - Dias da semana começam a partir de segunda-dia.
  • dateformat - {String} - especifica o formato de data. o valor padrão - DEF.dateformat
  • apply - {String} - Etiqueta para o botão "Aplique"
  • cancel - {String} - Etiqueta para o botão "Cancelar"
  • custom - {String} - Etiqueta para o botão de filtro "Custom"
  • month - {String} - Etiqueta para "Mês atual" botão de filtro
  • thisY - {String} - Etiqueta para "Este ano" botão de filtro
  • lastY - {String} - Etiqueta para "último ano" botão de filtro

Use-o com <ui-component name="period">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Kirill Zlobin. fonte: o Componentator Reserva de componentes, licença MIT.

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>