O meu calendário HTML só funciona até 21 horas

[Frank K Hosaka]

Estou bastante feliz, eu imaginava que iria conseguir mexer na função assíncrona só em 2030, mas com a ajuda do Wash e Iows aqui do fórum, consegui ganhar 8 anos.

Também aprendi um pouco de HTML, comecei a usar o <input type=date>.

O único problema desse calendário é que ele só funciona até 21 horas, depois desse horário, o calendário avança um dia.

Pesquisei no Google, e um rapaz expicou que o único jeito de consertar esse problema é instalando uma biblioteca chamada moment.js, e isso não vou fazer porque eu joguei fora a biblioteca do JQuery.js. Mesmo assim, o meu extrato contábil funciona, pelo menos até 21 horas.

astudy.html

<meta charset="UTF-8">
Extrato do dia: <input type=date id=inpdia><input type=submit value=Confirmar onclick=procurar(inpdia.value)>
<div id=recdiv></div>
<script>
	// rotina inicial, define o calendário com a data atual
	// problema: o calendário está de acordo com a Africa e não com a América
	data=new Date()
	dia=data.getUTCDate()
	mes=data.getUTCMonth()+1
	if (mes<10) {mes="0"+mes}
	ano=data.getUTCFullYear()
	inpdia.value=ano+"-"+mes+"-"+dia
	kControle=0
	jTamanho=0
	obExtrato={}
async function procurar(dia) {
	//solicita ao PHP o extrato do dia selecionado
	form = new FormData()
	form.append("procurar",dia);
	response=await fetch("astudy.php", {method: "POST", body: form})
	body=await response.json()
	//mostra o extrato, se o PHP responder
	jTamanho=body.length
	obExtrato=body
	listadiario()}
function listadiario() {
	//lista 15 registros de cada vez, indefinidamente, até o usuário se cansar
	if (kControle<jTamanho) {
		exibe="<table><tr><th>Docto<th>Conta<th>Valor<th>Historico"
		for (iNdicador=kControle;iNdicador<kControle+15;iNdicador++){
			if (iNdicador==jTamanho){break}	
			if (obExtrato[iNdicador].debito!=null){valor=obExtrato[iNdicador].debito}
			if (obExtrato[iNdicador].credito!=null){valor="<font color=red>"+obExtrato[iNdicador].credito+"</font>"}
			valor=valor.replace(".",",")
			exibe+="<tr><td>"+obExtrato[iNdicador].docto+"<td>"+obExtrato[iNdicador].conta
			exibe+="<td align=right>"+valor+"<td>"+obExtrato[iNdicador].hist}
		exibe+="<tr><td><td><td><td><input type=submit value=Continua onclick=listadiario()></table>"
		recdiv.innerHTML=exibe
		kControle=iNdicador
		if (kControle>=jTamanho){kControle=0}}}
</script>

---------------------------------------------------------------------

astudy.php

<?php
$dia=$_POST['procurar'];
$mysqli=new mysqli("localhost","root","","diario");
$query=$mysqli->query("select * from tbdiario where dia='$dia'");
$rows=$query->fetch_all(MYSQLI_ASSOC);
$json=json_encode($rows);
echo $json;

 

Editado Junho 29, 2022 por Frank K Hosaka

[wash]

Bão sr. @Frank K Hosaka?
Lembre-se que o unixtimestamp considera o horário timezone GTM = 0
https://pt.wikipedia.org/wiki/Meridiano_de_Greenwich

O Js é frontend(é intepretado na sua máquina)
Como o sr. está usando um s.o. em pt-br, o browser tb...
O horário de sua máquina deve estar configurado para GMT-3
Ou seja quando na sua máquina for 21h, no servidor já vai ser 21h +3h = 24h (o +3h ali é compensando que o sr. está numa região que fica -3h do Meridiano de Greenwich)
Trabalhar com data e tempo é mesmo muito embaçado.
Mas devagar a gente vai aprendendo. Eu tb tenho muita dificuldade.

Pense que uma pessoa em outra timezone vai usar seu sistema: GMT-1 ou GMT+2, etc. O sistema precisa estar sempre em UTC, que seria equivalente a GMT= 0, Greenwich Mean Time
E, em cada browser, que cada user ao redor do mundo vai usar, o sr detecte a timezone dele e ajuste a datetime para aquela timezone específica.

Por isso o sistema precisa desta neutralidade.
Pro sr. poder oferecer a hora local a qualquer user, em qualquer timezone 

[Frank K Hosaka]

Fiz um teste, e eu acredito que o JavaScript sempre assume o horário local de quem executa o programa, o que não é o caso do PHP. 

<?php
date_default_timezone_set('America/Sao_Paulo');
echo "Horário PHP ".date('D Y-m-d H:i:s');?>

<p>Horário JS <a id=ag></a>

<script>
e=document.getElementById('ag')
e.innerHTML=new Date()
</script>