Porto Alegre

Rio Grande do Sul

E-mail:

contato@camilamoreira.com.br

Atendimento de

Seg. à Sex. das 09:00 as 17:00

Título

Autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et dolore feugait.

Arquivo de tag

Date Range Picker: Como configurar o formato, o idioma e adicionar no input do Scriptcase

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.

Fonts: www.daterangepicker.com/, www.gocache.com.br/cdn
Share on facebook
Share on email
Share on whatsapp
Share on twitter