Para que serve o date range picker ?
O Date Range Picker foi criado inicialmente para atender os relatórios do Improvely. O seletor de período pode ser adicionar em qualquer elemento da página web (preferencialmente inputs), para exibir dois calendários que permitem a seleção de datas, horários ou intervalos pré-definidos, como por exemplo: últimos 30 dias, última semana, próximo mês, ano atual, etc.
Aplicando o date range picker
Neste exemplo utilizaremos o Scriptcase para testar esta funcionalidade, porém você pode utilizar este código direto no seu HTML.
Utilizaremos também “links virtuais” para importar os arquivos das bibliotecas Bootstrap e Date Range Picker já que é apenas uma demonstração de uso. Aconselho vocês a baixarem os arquivos para não correr o risco de perdê-los caso saiam do ar ou o servidor CDN esteja fora.
Links necessários
Você deve adicionar estes links na sua página HTML, caso esteja utilizando o Scriptcase, siga o exemplo abaixo e cole o código no evento onScriptInit.
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<?php
Adicionando a função no input
Antes de adicionar a função no seu input, você precisa identificar o “name” dele.
Para isso clique com o botão direito do mouse em cima do elemento desejado; Selecione a opção Inspecionar elemento; Observe que o código HTML do objeto será marcado na janela que irá abrir; Basta você identificar o name deste elemento e adicionar a função daterangepicker() há ele.
Inspecionar elemento ou Inspecionar
Identificar o name no elemento
Adicione ao input a função
<script>
$(document).ready(function(){
$('input[name="periodo"]').daterangepicker();
});
</script>
Esta função precisa estar logo abaixo dos links, antes de abrir o PHP (<?php) novamente.
Ao executar a tela, você já poderá observar o calendário funcionando, porém ainda em inglês e com o formato mm/dd/aaaa. Para alterar o formato e o idioma, adicione dentro dos parenteses da função a seguinte informação:
{
"locale": {
"format": "DD/MM/YYYY",
"separator": " - ",
"applyLabel": "Aplicar",
"cancelLabel": "Cancelar",
"daysOfWeek": [
"Dom",
"Seg",
"Ter",
"Qua",
"Qui",
"Sex",
"Sab"
],
"monthNames": [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
],
"firstDay": 1
}
}Agora sim! O seu input date range picker já esta funcionando e ainda com formato e idiomas corretos.
Se você leu o conteúdo e não conseguiu entender, assista o vídeo abaixo.
Então é isso pessoal, espero que vocês tenham gostado do post.