Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Calendário

Calendário e para facilitar a selação de datas

Para usar calendário no campo desejado, basta usar o seletor .datepicker no campo.

1
2
3
4
5
6

<form action="" class="ls-form ls-form-horizontal" data-ls-module="form">
  <label class="ls-label col-md-3">
    <b class="ls-label-text">Data</b>
    <input type="text" name="cel2" class="datepicker"  placeholder="dd/mm/aaaa">
  </label>
</form>

Utilizamos o plugin Pikaday para o calendário do Locawebstyle, pré-configurado para pt-br.

Para iniciar um novo datepicker com javascript, utilizando as mesmas configurações, use, no javascript:

1

locastyle.datepicker.newDatepicker('#id ou .classe do elemento');

Todas as demais configurações e métodos do plugin Pikaday podem ser utilizados, conforme descrito na sua documentação.

Disparo alternativo

Para disparar o calendário através do clique em outro elemento, basta acrescentar o atributo data-trigger-calendar ao elemento que terá essa funcionalidade, passando a referência do campo do calendário. Observe o exemplo abaixo:

1
2
3
4
5
6
7
8
9

<form action="" class="ls-form ls-form-inline" data-ls-module="form">
  <label class="ls-label col-md-4">
    <div class="ls-prefix-group">
      <b class="ls-label-text">Data</b>
      <input type="text" name="cel3" class="datepicker" id="datepickerExample" placeholder="dd/mm/aaaa">
      <a class="ls-label-text-prefix ls-ico-calendar" data-trigger-calendar="#datepickerExample" href="#"></a>
    </div>
  </label>
</form>

Intervalo de datas

Utilizar dois campos de calendário com intervalo de datas é simples. Primeiro, ambos os campos devem possuir a classe .ls-daterange para que o módulo consiga identificar a funcionalidade. Depois basta colocar um atributo data-ls-daterange no primeiro campo apontando para o segundo (com um seletor), para que a referência entre ambos seja criada. Veja o exemplo abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<form action="" class="ls-form ls-form-inline" data-ls-module="form">
  <label class="ls-label col-md-4 col-sm-12">
    <div class="ls-prefix-group">
      <span data-ls-module="popover" data-content="Escolha o período desejado e clique em 'Filtrar'."></span>
      <input type="date" name="range_start" class="datepicker ls-daterange" placeholder="dd/mm/aaaa" id="datepicker1" data-ls-daterange="#datepicker2">
      <a class="ls-label-text-prefix ls-ico-calendar" data-trigger-calendar="#datepicker1" href="#"></a>
    </div>
  </label>

  <label class="ls-label col-md-4 col-sm-12">
    <div class="ls-prefix-group">
      <span data-ls-module="popover" data-content="Clique em 'Filtrar' para exibir  o período selecionado."></span>
      <input type="date" name="range_end" class="datepicker ls-daterange" placeholder="dd/mm/aaaa" id="datepicker2">
      <a class="ls-label-text-prefix ls-ico-calendar" data-trigger-calendar="#datepicker2" href="#"></a>
    </div>
  </label>
</form>