Nesse post iremos ver um plugin data para formulários do Bootstrap e, ao clicarmos no campo data, aparecerá um calendário para selecionar a data.
Links CDN
Não sabe o que é um link CDN? Clique aqui para saber.
Mas, resumindo,
, CDN significa Content Delivery Network e são servidores localizados em algum local seguro que contém cópias de conteúdo estático (como imagens, arquivos CSS e JavaScript) de um site.
Temos duas opções quando queremos adicionar um framework dentro de nosso site:
- baixar o arquivo do framework e enviar para nosso site
- apenas inserir um link do framework disponibilizado por um servidor CDN.
Bom, vamos usar links CDNs ao invés de baixar os pacotes do framework para nosso computador. Isso porque, para usarmos o Bootstrap e seus plugins, temos que inserir seus respectivos links:
insera, dentro da tag <head>, os links
<script src="//code.jquery.com/jquery.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
E os links do nosso calendário:
<script src=" https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/js/bootstrap-datepicker.min.js "></script> <link href=" https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.10.0/dist/css/bootstrap-datepicker3.min.css " rel="stylesheet">
Agora, antes da tag de fechamento </body>, insira esse outro link:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
Plugin Bootstrap-Datepicker
Eu usarei o plugin chamado Bootstrap-Datepicker para fazer aparecer aparecer um pequeno calendário ao clicarmos no campo da data.
O plug-in é apenas um seletor de datas para formulários. Existem várias opções de seletores de data, mas Bootstrap-Datepicker é uma das bibliotecas mais populares e completas disponíveis.
O plugin do seletor de data Bootstrap-Datepicker está disponível no CDN Jsdeliv ou você pode baixá-lo no Github.
Criando um Formulário de Exemplo e Iniciando o Plugin
Agora, precisamos criar um formulário para testarmos o plugin.
Esse é o formulário que estarei criando é bem simples, contém apenas o campo de data e o botão para enviar, mas ele já irá fazer o calendário aparecer ao clicarmos, isso é devido à opção data-provide=”datepicker” no input
<form>
<input type="text" data-provide="datepicker" class="form-text">
<button type="submit" class="btn btn-primary btn-sm">Enviar</button>
</form>
Já sobre as classes de botões(btn btn-primary btn-sm) poderá ver mais detalhes aqui: Classes para Botões no Bootstrap
Alterando o formato da data do plugin datepicker – de mm/dd/yyyy para dd/mm/yyyy
Se você pegar o valor do calendário acima, verá que a data estará com o dia e mês invertidos, no formato americano, para colocarmos no formato correto, podemos usar data-date-format=”dd/mm/yyyy” dentro do input.
<form action="index.php" method="post">
<input type="text" name="data" data-provide="datepicker-inline" data-date-format="dd/mm/yyyy" class="form-text">
<button type="submit" class="btn btn-primary btn-sm">Enviar</button>
</form>
Pronto, com isso você obterá a data no formato correto brasileiro.
Veja que incrementei um pouco nosso formulário, coloquei para os valores serem enviados para a própria página através de action=”index.php”, usando o método post com method=”post”
Também usei PHP para pegar o resultado:
<?php echo $_POST['data']; ?>
Muitas opções podem ser passadas dentro do input ou através de script:
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
startDate: '-3d'
});Opções do datepicker
Vimos acima que a maioria das opções pode ser fornecida por meio de atributos de dados, como em ata-date-format=”dd/mm/yyyy” que colocamos dentro do input.
Uma opção pode ser convertida em um atributo de dados tomando seu nome, substituindo cada letra maiúscula por seu equivalente minúsculo precedido por um travessão e acrescentando “data-data-” ao resultado.
Exemplo,
- startDate se torna data-date-start-date
- format fica como sendo data-date-format
- daysOfWeekDisabled fica data-date-days-of-week-disabled
Abaixo coloco uma tabela para referência e consulta das opções do datepicker do bootstrap:
| Opções | Valor Padrão |
|---|---|
| autoclose | false |
| assumeNearbyYear | false |
| beforeShowDay | |
| beforeShowMonth | |
| beforeShowYear | |
| beforeShowDecade | |
| beforeShowCentury | |
| calendarWeeks | false |
| clearBtn | false |
| container | ‘body’ |
| datesDisabled | [] |
| daysOfWeekDisabled | [] |
| daysOfWeekHighlighted | [] |
| defaultViewDate | today |
| disableTouchKeyboard | false |
| enableOnReadonly | true |
| endDate | Infinity |
| forceParse | true |
| format | ‘mm/dd/yyyy’ |
| immediateUpdates | false |
| inputs | |
| keepEmptyValues | false |
| keyboardNavigation | true |
| language | ‘en’ |
| maxViewMode | 4 ‘centuries’ |
| minViewMode | 0 ‘days’ |
| multidate | false |
| multidateSeparator | ‘,’ |
| orientation | ‘auto’ |
| showOnFocus | true |
| startDate | -Infinity |
| startView | 0 ‘days’ (current month) |
| templates | |
| title | ‘’ |
| todayBtn | false |
| todayHighlight | true |
| toggleActive | false |
| weekStart | 0 (Sunday) |
| zIndexOffset | 10 |
Uma opção interessante e que sempre uso é a todayHighlight que serve para destacar o dia atual. Podemos colocar ela dentro do input assim: data-date-today-highlight=”true”
Fontes: CDNs_datepicker_jsdelivr, datepicker_docs, bootstrap-datepicker-doc-opcoes