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

Composer: Como utilizar dentro do Scriptcase ?

De acordo com o site oficial do Composer

Composer é uma ferramenta para gerenciamento de dependências em PHP. Ele permite que você declare as bibliotecas dependentes que seu projeto precisa e as instala para você.

Deixa eu explicar

Para quem não sabe, o Composer é uma ferramenta que foi criada para gerenciar as dependências do PHP que são cada vez mais indispensáveis hoje em dia. Com pouquissímas linhas de código você define quais bibliotecas de terceiros ou suas mesmo você irá utilizar. O Composer simplesmente baixa pra vocês as bibliotecas e você simplesmente as usa.

Neste exemplo quero ensinar vocês a baixar o composer localmente e depois adicionar os arquivos na biblioteca externa do Scriptcase para utilizar nos seus projetos.

Como instalar o composer

A primeira coisa que você precisa fazer, é criar uma pasta de fácil acesso e de preferência com um nome fácil para que você consiga identificar no terminal.

Após isso, abra o terminal do seu sistema operacional.

Feito isso, você vai precisar acessar a pasta que criou. No exemplo, a pasta está dentro de Mesa > pdfparser. Sendo assim utilizei o seguinte comando:

cd Desktop/pdfparser

Agora sim vamos começar a instalar o Composer. Você vai precisar executar os comandos abaixo, um por vez.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Agora se você olhar dentro da pasta, terá um arquivo chamado composer.phar. Se este arquivo estiver lá, fique tranquilo, esta dando certo.

O próximo passo é você criar um arquivo chamado composer.json dentro desta pasta. Este arquivo irá conter a requisição das dependências que deseja utilizar. E essa requisição é você quem adiciona. A estrutura do arquivo é esta:

Dentro do “require”: {} você vai adicionar a linha da biblioteca que deseja utilizar, neste caso será:

"smalot/pdfparser": "*"

Caso queira utilizar outra, coloque uma virgula e a linha da outra biblioteca abaixo.

Agora você vai executar o comando abaixo no terminal.

Dentro da pasta criada termos a seguinte estrutura de acordo com o código mostrado aqui. O arquivo composer.phar pode deletar sem medo. Conferindo e estando tudo certinho, vamos para o Scriptcase.

Colocando o conteúdo dentro do Scriptcase

Aqui é bem simples. Primeiro você precisa zipar a pasta com todos os arquivos baixados.

Depois você vai no projeto e abre a biblioteca externa, cria uma nova ou adiciona os arquivos numa já existente. Se você não sabe utilizar biblioteca externa, acessa aqui. Suba o arquivo para dentro da biblioteca criada e habilite o uso da mesma para o seu projeto.

Agora você vai até a aplicação que deseja utilizar as dependências baixadas pelo composer e coloca lá o código de importação do arquivo autoload.php. Em seguida comece a utilizar a biblioteca normalmente. Observem que tenho ali um código da biblioteca PDFParser que abre um arquivo PDF e extrai o conteúdo dele em forma de texto.

E pronto, já vai funcionar. Fácil, rápido, seguro e muito útil.
Se você não conseguiu entender ou não deu certo, assista o vídeo abaixo, talvez você entenda melhor.

Então é isso pessoal, espero que vocês tenham gostado do post.

Fonts:  https://getcomposer.org/
Share on facebook
Share on email
Share on whatsapp
Share on twitter