Ir para conteúdo
Fórum Script Brasil
  • 0

calendario.php

Frank K Hosaka

Perguntado por Frank K Hosaka,

 Share

Pergunta

Frank K Hosaka

Frank K Hosaka

Postado
Postado

Eu tenho um arquivo chamado diario.php e eu tentei separar em duas partes, o html que pede a informação e o php que fornece a informação, isso depois que eu aprendi a usar a função assíncrona do JavaScript. Para a minha alegria, o projeto deu certo, mas esbarrei num sério problema, o código só funcionou porque eu travei tudo para fazer o extrato contábil só de um dia. Isso é bem inútil, precisava ver outros dias. Para isso, eu preciso de um calendário. Na internet tem um calendário pronto, é o famoso JQuery, mas ele precisa de um monte de parâmetros para aportuguesar o calendário.

Eu uso o JQuery no meu projeto, ele está embutido dentro do meu arquivo menu.php, ou seja, quaquer outra tarefa que eu faça, toda a biblioteca do JQuery vai estar disponível - o problema é que só uso para uma ou duas rotinas. Isso também é bem improdutivo. Logo, não me resta outra solução senão fazer o calendário do zero. Como eu não sei nada de HTML, CSS, JS, o único jeito é usar o PHP. A minha ideia é tirar o JQuery do menu.php, e usar a minha "solução" para o calendário.

Não sei se vou conseguir, mas enfim já fiz um esboço no papel, ele começa com uma tabela que agrupa três caixas de seleção, um se chama dia, outro se chama mês e o último se chama ano. Até o fim dessa semana, já terei alguma coisa em PHP. Me desejem sorte. E eu desejo uma boa semana para vocês.

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 1
lowys

lowys

Postado
Postado (editado)

Não é necessário economizar nos nomes das variáveis.
Quando escrevemos código, escrevemos para que humanos leiam.
Depois que o interpretador fizer o trabalho dele, será código para que a máquina leia.
Pode usar variáveis mais semânticas, para que o sr. mesmo ou outrem que venham a manutenir seus scripts/sistemas, tenham a possibilidade de entender o que foi feito.

O sr. sabe que existe um input:date no html? https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input/date
segue sugestão/exemplo 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calendar</title>
    <style>
      hr {
        margin: 28px 0;
      }
    </style>
  </head>
  <body>
    <div id="caldiv"></div>
    <hr />
    <input type="date" />
    <script>
      function calendar() {
        table = `<table><tr>
          <tr><td>Dia:<td><select id='sldia'>`

        for (day = 1; day <= 31; day++) {
          table += '<option>' + day + '</option>'
        }
        table += "</select><td><select id='slmes'>"

        months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        for (month of months) {
          table += '<option>' + month + '</option>'
        }
        table += "</select><td><select id='slano'>"

        years = ['2020', '2021', '2022']
        for (year of years) {
          table += '<option>' + year + '</option>'
        }
        table += '</select><td><input type=submit value=Confirmar onclick=setDate()></table>'

        caldiv.innerHTML = table
        resetDate()
      }
      calendar()
      function resetDate() {
        hoje = new Date()
        sldia.selectedIndex = hoje.getUTCDate() - 1
        slmes.selectedIndex = hoje.getUTCMonth()
        slano.value = hoje.getUTCFullYear()
      }
      function setDate() {
        diaescolhido = sldia.value
        mesescolhido = slmes.value
        anoescolhido = slano.value
        caldiv.innerHTML +=
          'o dia escolhido foi ' + diaescolhido + '/' + mesescolhido + '/' + anoescolhido + '<br>'
        resetDate()
      }
      document.querySelector('input[type="date"]').addEventListener('change', (e) => {
        caldiv.innerHTML += `<p>A data escolhida no <b>input:date</b> foi: ${e.target.value}</p>`
      })
    </script>
  </body>
</html>

image.png.b2192ff42e31868af5c298c32c1691a2.png
Com o input date, já se evita datas impossíveis como 31/02/2020

Note que, uso o s.o. e o browser em inglês
Quem usa em pt-br, os nomes dos meses, formato da data e etc tb vão aparecer em pt-br

Editado por lowys
Link para o comentário
Compartilhar em outros sites
  • 0
Frank K Hosaka

Frank K Hosaka

Postado
  • Autor
Postado

O resultado é esse daqui, é um calendário bastante safado, pois eu não sei nada de CSS. 

astudy.php

<style>form {margin: 0;}</style>
<script>
function dia() {
	diaescolhido=sldia.options[sldia.selectedIndex].text
	mesescolhido=slmes.options[slmes.selectedIndex].text
	anoescolhido=slano.options[slano.selectedIndex].text
	caldiv.innerHTML="o dia escolhido foi "+diaescolhido+" / "+mesescolhido+" / "+anoescolhido}
</script>
<?php
echo "<table><tr><th><th><th><th>"
."<tr><td>Dia: <td><select id='sldia'>";
for ($i=1;$i<=31;$i++){	echo "<option>$i</option>";}
echo "</select><td><select id='slmes'>";
$mes=["01","02","03","04","05","06","07","08","09","10","11","12"];
for ($i=0;$i<=11;$i++){	echo "<option>$mes[$i]</option>";}
echo "</select><td><select id='slano'>";
$ano=[2020,2021,2022];
for ($i=0;$i<=2;$i++){	echo "<option>$ano[$i]</option>";}
echo "</select><td><input type=submit value=Confirmar onclick=dia()></table>";
echo "<script>sldia.selectedIndex=26;slmes.selectedIndex=5;slano.selectedIndex=2</script>";
echo "<div id=caldiv></div>";

Esse é um calendário bem simples e safado. Ele não tem nenhum recurso, não diz quando é segunda, terça, ou se contempla os diferentes dias que compõe cada mês, mas pelo menos tira o usuário do seu pé, que tem preguiça de digitar.

Link para o comentário
Compartilhar em outros sites
  • 0
Frank K Hosaka

Frank K Hosaka

Postado
  • Autor
Postado

Agora que eu consegui criar a solução em PHP, o problema é conveter tudo isso em HTML, coisa que eu não domino muito, mas na base da tentativa e erro, cheguei nesse código:

  

astudy.html

<div id=caldiv></div>
<script>
function pegardia() {
	i="<table><tr><th><th><th><th>"
	i+="<tr><td>Dia: <td><select id='sldia'>"
	for (j=1;j<=31;j++) {i+="<option>"+j+"</option>"}
	i+="</select><td><select id='slmes'>"
	k=["01","02","03","04","05","06","07","08","09","10","11","12"]
	for (j=0;j<=11;j++){i+="<option>"+k[j]+"</option>";}
	i+="</select><td><select id='slano'>"
	k=["2020","2021","2022"]
	for (j=0;j<=2;j++){i+="<option>"+k[j]+"</option>";}
	i+="</select><td><input type=submit value=Confirmar onclick=dia()></table>"
	caldiv.innerHTML=i
	definirdia()}
pegardia()
function definirdia(){
	hoje=new Date()
	sldia.selectedIndex=hoje.getUTCDate()-1
	slmes.selectedIndex=hoje.getUTCMonth()
	slano.selectedIndex=hoje.getUTCFullYear()-2020;}
function dia() {
	diaescolhido=sldia.options[sldia.selectedIndex].text
	mesescolhido=slmes.options[slmes.selectedIndex].text
	anoescolhido=slano.options[slano.selectedIndex].text
	caldiv.innerHTML+="o dia escolhido foi "+diaescolhido+"/"+mesescolhido+"/"+anoescolhido+"<br>"
	definirdia()}
</script>

Note que eu coloquei o código JS debaixo do elemento DIV, eu não consigo fazer esse código funcionar se eu mudar a ordem dos tratores, mesmo usando o famoso "document.getElmentById". Já a função definirdia() é um verdadeiro caos, a função nativa getUTCDate retorna o dia atual (assim eu precisei subtrair 1 para casar com o índice da caixa de seleção), já a função nativa getUTCMonth retorna o índice do mês (que começa com zero), já a função nativa getUTCFullYear retorna o ano atual (eu precisei subtrair 2020 para obter o valor do índice).

Link para o comentário
Compartilhar em outros sites
  • 0
Frank K Hosaka

Frank K Hosaka

Postado
  • Autor
Postado
1 hora atrás, lowys disse:

Não é necessário economizar nos nomes das variáveis.
Quando escrevemos código, escrevemos para que humanos leiam.
Depois que o interpretador fizer o trabalho dele, será código para que a máquina leia.
Pode usar variáveis mais semânticas, para que o sr. mesmo ou outrem que venham a manutenir seus scripts/sistemas, tenham a possibilidade de entender o que foi feito.

O sr. sabe que existe um input:date no html? https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input/date
segue sugestão/exemplo 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calendar</title>
    <style>
      hr {
        margin: 28px 0;
      }
    </style>
  </head>
  <body>
    <div id="caldiv"></div>
    <hr />
    <input type="date" />
    <script>
      function calendar() {
        table = `<table><tr>
          <tr><td>Dia:<td><select id='sldia'>`

        for (day = 1; day <= 31; day++) {
          table += '<option>' + day + '</option>'
        }
        table += "</select><td><select id='slmes'>"

        months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        for (month of months) {
          table += '<option>' + month + '</option>'
        }
        table += "</select><td><select id='slano'>"

        years = ['2020', '2021', '2022']
        for (year of years) {
          table += '<option>' + year + '</option>'
        }
        table += '</select><td><input type=submit value=Confirmar onclick=setDate()></table>'

        caldiv.innerHTML = table
        resetDate()
      }
      calendar()
      function resetDate() {
        hoje = new Date()
        sldia.selectedIndex = hoje.getUTCDate() - 1
        slmes.selectedIndex = hoje.getUTCMonth()
        slano.value = hoje.getUTCFullYear()
      }
      function setDate() {
        diaescolhido = sldia.value
        mesescolhido = slmes.value
        anoescolhido = slano.value
        caldiv.innerHTML +=
          'o dia escolhido foi ' + diaescolhido + '/' + mesescolhido + '/' + anoescolhido + '<br>'
        resetDate()
      }
      document.querySelector('input[type="date"]').addEventListener('change', (e) => {
        caldiv.innerHTML += `<p>A data escolhida no <b>input:date</b> foi: ${e.target.value}</p>`
      })
    </script>
  </body>
</html>

image.png.b2192ff42e31868af5c298c32c1691a2.png
Com o input date, já se evita datas impossíveis como 31/02/2020

Note que, uso o s.o. e o browser em inglês
Quem usa em pt-br, os nomes dos meses, formato da data e etc tb vão aparecer em pt-br

Que maravilha!

Eu juro que não sabia que existia <input type=date> e que ele já trazia embutido um calendário. Vou jogar fora a biblioteca do JQuery, isso vai aliviar bastante o código que fiz no meu menu.php. Quanto aos códigos mnemônicos que eu uso, isso é preguiça de escrever. Eu sei que estou fazendo a coisa errada. Assim, eu não capricho na documentação, porque tudo vai acabar indo na lata do lixo.

Eu fiz o teste por aqui, e o browser assumiu como linguagem padrão o português e assim o calendário também saiu em português e só usei o marcador.

Obrigado mesmo.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...