calendario.php

Frank K Hosaka · Junho 27, 2022

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.

lowys · Junho 27, 2022

Oliver.Tales · Junho 27, 2022

Fiquei curioso, compartilha o resultado

lowys · Junho 28, 2022

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 Junho 28, 2022 por lowys

Frank K Hosaka · Junho 27, 2022

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.

Frank K Hosaka · Junho 28, 2022

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).

Frank K Hosaka · Junho 28, 2022

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>

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.

Entrar

calendario.php

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

Oliver.Tales

Link para o comentário

Compartilhar em outros sites

lowys

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades