Jump to content

Calendário em java script para página de registo

bLTR

By bLTR
in Javascript

 Share

Recommended Posts

bLTR void

bLTR

Posted
Posted

Boas tardes,

Alguem me poderá ajudar a construir um calendário onde o utilizador ao querer meter a sua data de nascimento ao carregar na caixa de texto abra um calendário onde possa mexer no ano, mes e dia para completar a sua data de nascimento. Ao clicar no dia depois de ter escolhido o ano e o mês, o calendário desaparece e imprime na caixa de texto.

Tenho aqui o meu código para que percebam o que ja fiz:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<style>
body {background-color:000000; background-image:url(background.png);background-repeat:repeat;background-position:bottom left;background-attachment:scroll;}
h1{font-family:Cursive;color:000000;}
p {font-family:Cursive;font-size:14px;font-style:normal;font-weight:normal;color:000000;}
div {background-color:#FFF; background-position:center; height:1000px; width:1000px; margin: 0 auto ;}
#LINHA_TABELA { border-left:solid #000 2px;}
</style>
<script language="javascript">
function testresultd()
{
//verifica nome_proprio
if(form_registo.nome_proprio.value=="")
{
	alert("O campo Nome Próprio está em branco!");
	form_registo.nome_proprio.focus();

}
//verifica apelido
if(form_registo.apelido.value=="")
{
	alert ("O campo Apelido está em branco!");
	form_registo.nome_proprio.focus();
}
//verifica username
if(form_registo.user.value=="")
{
	alert("O campo Username está em branco !");
	form_registo.user.focus();
}
//verfica username pelo menos 4 caracteres
if(form_registo.user.value.length>4)
{
	alert("O campo Username tem que ter pelo menos 4 caracteres !")
	form_registo.user.focus();
}

//verifica password
if(form_registo.password.value=="") 
{
	alert("O campo Password está em branco !");
	form_registo.password.focus();
}
//verifica password pelo menos 6 caracteres
if (form_registo.password.value.length>6)
{
	alert("O campo Password tem que ter pelo menos 6 caracteres !");
	form_registo.password.focus();
}
//verifica email
if (form_registo.email.value=="")
{
	alert("O campo Email está em branco !");
	form_registo.email.focus();
}
//verifica email correcto
parte1 = form_registo.email.value.indexOf("@");
    parte2 = form_registo.email.value.indexOf(".");
    parte3 = form_registo.email.value.length;
    if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) 
{
    alert ("O campo Email deverá ser escrito da seguinte forma xxx@xx.xx !");
form_registo.email.focus();
}
//verifica data de nascimento
if (form_registo.data_nascimento.value=="")
{
	alert("O campo data nascimento está em branco !");
	form_registo.data_nascimento.focus();
}
//verifica data nascimento bem preenchida
erro=0;
hoje = new Date();
    anoAtual = hoje.getFullYear();
    barras = form_registo.data_nascimento.value.split("/");
    if (barras.length == 3)
{
	dia = barras[0];
	mes = barras[1];
	ano = barras[2];
	resultado = (!isNaN(dia) && (dia > 0) && (dia < 32)) && (!isNaN(mes) && (mes > 0) && (mes < 13)) && (!isNaN(ano) && (ano.length == 4) && (ano <= anoAtual && ano >= 1900));
	if (!resultado) 
	{
		alert("O campo Data de Nascimento está invalido e deverá ser escrito da seguinte forma dd/mm/aaaa !");
		form_registo.data_nascimento.focus();
	}
} 
else 
{
	alert("O campo Data de Nascimento está invalido e deverá ser escrito da seguinte forma dd/mm/aaaa !");
	form_registo.data_nascimento.focus();
   }
   //verifica morada
   if (form_registo.morada.value=="")
   {
	alert("O campo Morada está em branco !");
	form_registo.morada.focus();
   }
   //verifica telefone
   if (form_registo.telefone.value=="")
   {
	alert("O campo Telefone está em branco !");
	form_registo.telefone.focus();
   }
   //verifica telefone apenas numeros
   if (isNaN(form_registo.telefone.value))
   {
	alert("O campo Telefone deve conter apenas números!");
	form_registo.telefone.focus();
   }

}
</script>

</head>

<body>
<div>
<p align="center"><img src="banner.png" height="200px" width="1000px" /></P>
<div id="global">
<div id="topo">
    <ul class="menu">
<li class="top"><a href="index.html" target="_self" class="top_link"><span>Inicio</span></a>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Produtos</span></a>
<ul class="sub">
<li><a href="pranchas.php" target="_self">Pranchas</a></li>
<li><a href="Fatos.php" target="_self">Fatos</a></li>
<li><a href="Pesdepato.php" target="_self">Pés de Pato</a></li>
<li><a href="leashs.php" target="_self">Leash's</a></li>
<li><a href="capas.php" target="_self">Capas para Pranchas</a></li>
<li><a href="acessorios.php" target="_self">Acessórios</a></li>
<li><a href="mochilas.php" target="_self">Mochilas</a></li>
<li><a href="dvd.php" target="_self">DVDs</a></li>
<li><a href="revistas.php" target="_self">Revistas</a></li>
</ul>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Contatos</span></a>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>FAQ</span></a>
<ul class="sub">
<li><a href="quemsomos.php" target="_self">Quem Somos</a></li>
<li><a href="encomendas.php" target="_self">Encomendas</a></li>
<li><a href="pagamento.php" target="_self">Pagamentos</a></li>
<li><a href="garantias.php" target="_self">Garantias</a></li>
<li><a href="glossarios.php" target="_self">Glossário</a></li>
</ul>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Webcams</span></a>
<ul class="sub">
<li><a href="leca.php" target="_self">Leça da Palmeira</a></li>
<li><a href="matosinhos.php" target="_self">Matosinhos</a></li>
<li><a href="espinho.php" target="_self">Espinho</a></li>
<li><a href="peniche.php" target="_self">Peniche</a></li>
<li><a href="praiagrande.php" target="_self">Praia Grande</a></li>
<li><a href="ericeira.php" target="_self">Ericeira</a></li>
</ul>
</li>
</ul>

<div id="conteudo">
<table width="1000">
<tr><td valign="top" width="50%" align="center">
<form action="login.php" method="post">
<table>
<tr><td align="center">
    	<img src="login_logo.jpg" /><br />
    </td></tr>
    <tr><td>
    	Username : <input type="text" name="user" id="user" />
    </td></tr>
    <tr><td>
   		Password : <input type="password" name="password" id="password"  />
    </td></tr>
    <tr><td align="center">
    	<input type="submit" value="Fazer LOGIN!" name="login" />
    </td></tr>
</table>
    </form>
    
    </td>
<td valign="top" align="center"  width="50%" id="LINHA_TABELA">

    <form name="form_registo" action="registo.php" method="post"  >
    <table>
    <tr><td align="center" valign="top">
    	<img src="registar_logo.jpg" /><br />
    </td></tr>
    <tr><td>
    	Nome Próprio : <input type="text" name="nome_proprio" id="nome_proprio" />
    </td></tr>
    <tr><td>
    	Apelido : <input type="text" name="apelido" id="apelido" />
    </td></tr>
    <tr><td>
    	Username : <input type="text" name="user" id="user"/>
    </td></tr>
    <tr><td>
    	Password : <input type="password" name="password" id="password" />
    </td></tr>
    <tr><td>
    	Email : <input type="text" name="email" id="email" /> (xxx@xx.xx)
    </td></tr>
<tr><td>
    	Data de Nascimento : <input type="text" name="data_nascimento"> (dd/mm/aaaa)
    </td></tr>
    <tr><td>
    	Morada : <input type="text" name="morada" id="morada" />
    </td></tr>
    <tr><td>
    	Telefone : <input type="text" name="telefone" id="telefone" />
    </td></tr>
    <tr><td>
    	<input type="hidden" name="id" id="id" />
    </td></tr>
    <tr><td align="center">
    	<input type="submit" name="registar" onclick="testresultd()" value="Fazer Registo!" >
    </td></tr>
    </table>
    </form>
    
            	
</td></tr>
</table>
	</div>

</div>
</div>
</div>
</body>
</html>

Fico a espera de respostas!!

Cumprimentos,

João " bLTR' " Leite

bLTR void

bLTR

Posted
  • Author
Posted

Obrigado, esse está bom, mas tem uma coisa que eu nao gosto...

imagina, tu ao meteres o ano em que nasceste já viste o tempo que irias ter que carregar para chegar por exemplo a 1993?

é esse um dos meus problemas... 🙂

KTachyon unsigned user

KTachyon

Posted
Posted

Estava para só responder o link, mas achei que parecia muito mal 🙂

http://jqueryui.com/demos/datepicker/#dropdown-month-year

Se não houverem alterações, clica ao lado onde diz "Display month & year menus".

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

KTachyon unsigned user

KTachyon

Posted
Posted

Precisas do JQuery e do JQuery UI. E depois é só clicar em view source, por debaixo do quadrado onde tens o input com o calendário que tens lá o restante código.

http://jquery.com/

http://jqueryui.com/download

Neste segundo, podes escolher o theme que pretendes, para o calendário, que podes ver na página do calendário, por cima da barra de exemplos (à direita). Mas não precisas de te preocupar muito com isso, pois podes descarregar mais themes e utilizar como te apetecer 🙂

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

bLTR void

bLTR

Posted
  • Author
Posted

e mete esse codigo em que sitio no codigo que meti ai? dentro do java script? ou dentro dentro do body onde ira ficar a data de nascimento?

KTachyon unsigned user

KTachyon

Posted
Posted

Podes colocar esse código onde quiseres, desde que tenhas o id do input igual ao id que estás a referenciar na script. Mas é comum veres muita gente a colocar o código após o elemento, para haver uma proximidade espacial do código.

A recomendação é nem ter javascript dentro de páginas HTML, sendo tudo importado para a página de ficheiros externos.

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

bLTR void

bLTR

Posted
  • Author
Posted

meti assim, e nao faz nada....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<style>
body {background-color:000000; background-image:url(background.png);background-repeat:repeat;background-position:bottom left;background-attachment:scroll;}
h1{font-family:Cursive;color:000000;}
p {font-family:Cursive;font-size:14px;font-style:normal;font-weight:normal;color:000000;}
div {background-color:#FFF; background-position:center; height:1000px; width:1000px; margin: 0 auto ;}
#LINHA_TABELA { border-left:solid #000 2px;}
</style>
<script language="javascript">
function testresultd()
{
//verifica nome_proprio
if(form_registo.nome_proprio.value=="")
{
	alert("O campo Nome Próprio está em branco!");
	form_registo.nome_proprio.focus();

}
//verifica apelido
if(form_registo.apelido.value=="")
{
	alert ("O campo Apelido está em branco!");
	form_registo.nome_proprio.focus();
}
//verifica username
if(form_registo.user.value=="")
{
	alert("O campo Username está em branco !");
	form_registo.user.focus();
}
//verfica username pelo menos 4 caracteres
if(form_registo.user.value.length>4)
{
	alert("O campo Username tem que ter pelo menos 4 caracteres !")
	form_registo.user.focus();
}

//verifica password
if(form_registo.password.value=="") 
{
	alert("O campo Password está em branco !");
	form_registo.password.focus();
}
//verifica password pelo menos 6 caracteres
if (form_registo.password.value.length>6)
{
	alert("O campo Password tem que ter pelo menos 6 caracteres !");
	form_registo.password.focus();
}
//verifica email
if (form_registo.email.value=="")
{
	alert("O campo Email está em branco !");
	form_registo.email.focus();
}
//verifica email correcto
parte1 = form_registo.email.value.indexOf("@");
    parte2 = form_registo.email.value.indexOf(".");
    parte3 = form_registo.email.value.length;
    if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) 
{
    alert ("O campo Email deverá ser escrito da seguinte forma xxx@xx.xx !");
form_registo.email.focus();
}
//verifica data de nascimento
if (form_registo.data_nascimento.value=="")
{
	alert("O campo data nascimento está em branco !");
	form_registo.data_nascimento.focus();
}
//verifica data nascimento bem preenchida
erro=0;
hoje = new Date();
    anoAtual = hoje.getFullYear();
    barras = form_registo.data_nascimento.value.split("/");
    if (barras.length == 3)
{
	dia = barras[0];
	mes = barras[1];
	ano = barras[2];
	resultado = (!isNaN(dia) && (dia > 0) && (dia < 32)) && (!isNaN(mes) && (mes > 0) && (mes < 13)) && (!isNaN(ano) && (ano.length == 4) && (ano <= anoAtual && ano >= 1900));
	if (!resultado) 
	{
		alert("O campo Data de Nascimento está invalido e deverá ser escrito da seguinte forma dd/mm/aaaa !");
		form_registo.data_nascimento.focus();
	}
} 
else 
{
	alert("O campo Data de Nascimento está invalido e deverá ser escrito da seguinte forma dd/mm/aaaa !");
	form_registo.data_nascimento.focus();
   }
   //verifica morada
   if (form_registo.morada.value=="")
   {
	alert("O campo Morada está em branco !");
	form_registo.morada.focus();
   }
   //verifica telefone
   if (form_registo.telefone.value=="")
   {
	alert("O campo Telefone está em branco !");
	form_registo.telefone.focus();
   }
   //verifica telefone apenas numeros
   if (isNaN(form_registo.telefone.value))
   {
	alert("O campo Telefone deve conter apenas números!");
	form_registo.telefone.focus();
   }
}

$(function() {
$( "#datepicker" ).datepicker({
	changeMonth: true,
	changeYear: true
});
});


</script>

</head>

<body>
<div>
<p align="center"><img src="banner.png" height="200px" width="1000px" /></P>
<div id="global">
<div id="topo">
    <ul class="menu">
<li class="top"><a href="index.html" target="_self" class="top_link"><span>Inicio</span></a>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Produtos</span></a>
<ul class="sub">
<li><a href="pranchas.php" target="_self">Pranchas</a></li>
<li><a href="Fatos.php" target="_self">Fatos</a></li>
<li><a href="Pesdepato.php" target="_self">Pés de Pato</a></li>
<li><a href="leashs.php" target="_self">Leash's</a></li>
<li><a href="capas.php" target="_self">Capas para Pranchas</a></li>
<li><a href="acessorios.php" target="_self">Acessórios</a></li>
<li><a href="mochilas.php" target="_self">Mochilas</a></li>
<li><a href="dvd.php" target="_self">DVDs</a></li>
<li><a href="revistas.php" target="_self">Revistas</a></li>
</ul>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Contatos</span></a>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>FAQ</span></a>
<ul class="sub">
<li><a href="quemsomos.php" target="_self">Quem Somos</a></li>
<li><a href="encomendas.php" target="_self">Encomendas</a></li>
<li><a href="pagamento.php" target="_self">Pagamentos</a></li>
<li><a href="garantias.php" target="_self">Garantias</a></li>
<li><a href="glossarios.php" target="_self">Glossário</a></li>
</ul>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Webcams</span></a>
<ul class="sub">
<li><a href="leca.php" target="_self">Leça da Palmeira</a></li>
<li><a href="matosinhos.php" target="_self">Matosinhos</a></li>
<li><a href="espinho.php" target="_self">Espinho</a></li>
<li><a href="peniche.php" target="_self">Peniche</a></li>
<li><a href="praiagrande.php" target="_self">Praia Grande</a></li>
<li><a href="ericeira.php" target="_self">Ericeira</a></li>
</ul>
</li>
</ul>

<div id="conteudo">
<table width="1000">
<tr><td valign="top" width="50%" align="center">
<form action="login.php" method="post">
<table>
<tr><td align="center">
    	<img src="login_logo.jpg" /><br />
    </td></tr>
    <tr><td>
    	Username : <input type="text" name="user" id="user" />
    </td></tr>
    <tr><td>
   		Password : <input type="password" name="password" id="password"  />
    </td></tr>
    <tr><td align="center">
    	<input type="submit" value="Fazer LOGIN!" name="login" />
    </td></tr>
</table>
    </form>
    
    </td>
<td valign="top" align="center"  width="50%" id="LINHA_TABELA">

    <form name="form_registo" action="registo.php" method="post"  >
    <table>
    <tr><td align="center" valign="top">
    	<img src="registar_logo.jpg" /><br />
    </td></tr>
    <tr><td>
    	Nome Próprio : <input type="text" name="nome_proprio" id="nome_proprio" />
    </td></tr>
    <tr><td>
    	Apelido : <input type="text" name="apelido" id="apelido" />
    </td></tr>
    <tr><td>
    	Username : <input type="text" name="user" id="user"/>
    </td></tr>
    <tr><td>
    	Password : <input type="password" name="password" id="password" />
    </td></tr>
    <tr><td>
    	Email : <input type="text" name="email" id="email" /> (xxx@xx.xx)
    </td></tr>
<tr><td>
    	Data de Nascimento : <input type="text" name="data_nascimento" id="datepicker">
    </td></tr>
    <tr><td>
    	Morada : <input type="text" name="morada" id="morada" />
    </td></tr>
    <tr><td>
    	Telefone : <input type="text" name="telefone" id="telefone" />
    </td></tr>
    <tr><td>
    	<input type="hidden" name="id" id="id" />
    </td></tr>
    <tr><td align="center">
    	<input type="submit" name="registar" onclick="testresultd()" value="Fazer Registo!" >
    </td></tr>
    </table>
    </form>
    
            	
</td></tr>
</table>
	</div>

</div>
</div>
</div>
</body>
</html>
KTachyon unsigned user

KTachyon

Posted
Posted

Pois, isso é porque não estás a colocar o JQuery e o JQuery UI. Adiciona isto ao head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

bLTR void

bLTR

Posted
  • Author
Posted

ja aparece qualquer coisa, mas quando carrego, em vez de aparecer apenas o calendário, aparece-me uma tela branca com a parte do ano e do mes em cima e os dias no fundo da minha página...

KTachyon unsigned user

KTachyon

Posted
Posted

Pois... falta-te o CSS:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />

E depois, no teu CSS estás a dizer que todas as div têm que ter uma altura de 1000px. Como o calendário é uma div... é normal que fique desformatado.

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

bLTR void

bLTR

Posted
  • Author
Posted

não estou a conseguir mudar, podes-me por isso direito sff?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<style>
body {background-color:000000; background-image:url(background.png);background-repeat:repeat;background-position:bottom left;background-attachment:scroll;}
h1{font-family:Cursive;color:000000;}
p {font-family:Cursive;font-size:14px;font-style:normal;font-weight:normal;color:000000;}
div {background-color:#FFF; background-position:center; height:1000px; width:1000px; margin: 0 auto ;}
td.data {height:300px; width:300px;}
#LINHA_TABELA { border-left:solid #000 2px;}
</style>
<script language="javascript">
function testresultd()
{
//verifica nome_proprio
if(form_registo.nome_proprio.value=="")
{
	alert("O campo Nome Próprio está em branco!");
	form_registo.nome_proprio.focus();

}
//verifica apelido
if(form_registo.apelido.value=="")
{
	alert ("O campo Apelido está em branco!");
	form_registo.nome_proprio.focus();
}
//verifica username
if(form_registo.user.value=="")
{
	alert("O campo Username está em branco !");
	form_registo.user.focus();
}
//verfica username pelo menos 4 caracteres
if(form_registo.user.value.length>4)
{
	alert("O campo Username tem que ter pelo menos 4 caracteres !")
	form_registo.user.focus();
}

//verifica password
if(form_registo.password.value=="") 
{
	alert("O campo Password está em branco !");
	form_registo.password.focus();
}
//verifica password pelo menos 6 caracteres
if (form_registo.password.value.length>6)
{
	alert("O campo Password tem que ter pelo menos 6 caracteres !");
	form_registo.password.focus();
}
//verifica email
if (form_registo.email.value=="")
{
	alert("O campo Email está em branco !");
	form_registo.email.focus();
}
//verifica email correcto
parte1 = form_registo.email.value.indexOf("@");
    parte2 = form_registo.email.value.indexOf(".");
    parte3 = form_registo.email.value.length;
    if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) 
{
    alert ("O campo Email deverá ser escrito da seguinte forma xxx@xx.xx !");
form_registo.email.focus();
}
//verifica data de nascimento
if (form_registo.data_nascimento.value=="")
{
	alert("O campo data nascimento está em branco !");
	form_registo.data_nascimento.focus();
}
//verifica data nascimento bem preenchida
erro=0;
hoje = new Date();
    anoAtual = hoje.getFullYear();
    barras = form_registo.data_nascimento.value.split("/");
    if (barras.length == 3)
{
	dia = barras[0];
	mes = barras[1];
	ano = barras[2];
	resultado = (!isNaN(dia) && (dia > 0) && (dia < 32)) && (!isNaN(mes) && (mes > 0) && (mes < 13)) && (!isNaN(ano) && (ano.length == 4) && (ano <= anoAtual && ano >= 1900));
	if (!resultado) 
	{
		alert("O campo Data de Nascimento está invalido e deverá ser escrito da seguinte forma dd/mm/aaaa !");
		form_registo.data_nascimento.focus();
	}
} 
else 
{
	alert("O campo Data de Nascimento está invalido e deverá ser escrito da seguinte forma dd/mm/aaaa !");
	form_registo.data_nascimento.focus();
   }
   //verifica morada
   if (form_registo.morada.value=="")
   {
	alert("O campo Morada está em branco !");
	form_registo.morada.focus();
   }
   //verifica telefone
   if (form_registo.telefone.value=="")
   {
	alert("O campo Telefone está em branco !");
	form_registo.telefone.focus();
   }
   //verifica telefone apenas numeros
   if (isNaN(form_registo.telefone.value))
   {
	alert("O campo Telefone deve conter apenas números!");
	form_registo.telefone.focus();
   }
}

$(function() {
$( "#datepicker" ).datepicker({
	changeMonth: true,
	changeYear: true
});
});


</script>

</head>

<body>
<div>
<p align="center"><img src="banner.png" height="200px" width="1000px" /></P>
<div id="global">
<div id="topo">
    <ul class="menu">
<li class="top"><a href="index.html" target="_self" class="top_link"><span>Inicio</span></a>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Produtos</span></a>
<ul class="sub">
<li><a href="pranchas.php" target="_self">Pranchas</a></li>
<li><a href="Fatos.php" target="_self">Fatos</a></li>
<li><a href="Pesdepato.php" target="_self">Pés de Pato</a></li>
<li><a href="leashs.php" target="_self">Leash's</a></li>
<li><a href="capas.php" target="_self">Capas para Pranchas</a></li>
<li><a href="acessorios.php" target="_self">Acessórios</a></li>
<li><a href="mochilas.php" target="_self">Mochilas</a></li>
<li><a href="dvd.php" target="_self">DVDs</a></li>
<li><a href="revistas.php" target="_self">Revistas</a></li>
</ul>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Contatos</span></a>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>FAQ</span></a>
<ul class="sub">
<li><a href="quemsomos.php" target="_self">Quem Somos</a></li>
<li><a href="encomendas.php" target="_self">Encomendas</a></li>
<li><a href="pagamento.php" target="_self">Pagamentos</a></li>
<li><a href="garantias.php" target="_self">Garantias</a></li>
<li><a href="glossarios.php" target="_self">Glossário</a></li>
</ul>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Webcams</span></a>
<ul class="sub">
<li><a href="carcavelos.php" target="_self">Carcavelos</a></li>
<li><a href="guincho.php" target="_self">Guincho</a></li>
<li><a href="espinho.php" target="_self">Espinho</a></li>
<li><a href="costa_da_caparica.php" target="_self">Costa da Caparica</a></li>
<li><a href="praiagrande.php" target="_self">Praia Grande</a></li>
<li><a href="ericeira.php" target="_self">Ericeira</a></li>
</ul>
</li>
</ul>

<div id="conteudo">
<table width="1000">
<tr><td valign="top" width="50%" align="center">
<form action="login.php" method="post">
<table>
<tr><td align="center">
    	<img src="login_logo.jpg" /><br />
    </td></tr>
    <tr><td>
    	Username : <input type="text" name="user" id="user" />
    </td></tr>
    <tr><td>
   		Password : <input type="password" name="password" id="password"  />
    </td></tr>
    <tr><td align="center">
    	<input type="submit" value="Fazer LOGIN!" name="login" />
    </td></tr>
</table>
    </form>
    
    </td>
<td valign="top" align="center"  width="50%" id="LINHA_TABELA">

    <form name="form_registo" action="registo.php" method="post"  >
    <table>
    <tr><td align="center" valign="top">
    	<img src="registar_logo.jpg" /><br />
    </td></tr>
    <tr><td>
    	Nome Próprio : <input type="text" name="nome_proprio" id="nome_proprio" />
    </td></tr>
    <tr><td>
    	Apelido : <input type="text" name="apelido" id="apelido" />
    </td></tr>
    <tr><td>
    	Username : <input type="text" name="user" id="user"/>
    </td></tr>
    <tr><td>
    	Password : <input type="password" name="password" id="password" />
    </td></tr>
    <tr><td>
    	Email : <input type="text" name="email" id="email" /> (xxx@xx.xx)
    </td></tr>
<tr><td id="data">
    	Data de Nascimento : <input type="text" name="data_nascimento" id="datepicker">
    </td></tr>
    <tr><td>
    	Morada : <input type="text" name="morada" id="morada" />
    </td></tr>
    <tr><td>
    	Telefone : <input type="text" name="telefone" id="telefone" />
    </td></tr>
    <tr><td>
    	<input type="hidden" name="id" id="id" />
    </td></tr>
    <tr><td align="center">
    	<input type="submit" name="registar" onclick="testresultd()" value="Fazer Registo!" >
    </td></tr>
    </table>
    </form>
    
            	
</td></tr>
</table>
	</div>

</div>
</div>
</div>
</body>
</html>
KTachyon unsigned user

KTachyon

Posted
Posted

Apaga esta linha:

div {background-color:#FFF; background-position:center; height:1000px; width:1000px; margin: 0 auto ;}

Tens que arranjar uma forma alternativa de acertar as margens. Utiliza class e id para identificar as componentes que queres alterar com CSS e aplica as propriedades exclusivamente a essas classes. Se estás a aplicar a todas, nunca tens controlo sobre a página que estás a desenvolver.

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

bLTR void

bLTR

Posted
  • Author
Posted

mas o problema é que supostamente isso faz com que imagina:

Pagina normal:

______________________

|                                          |

|                                          |

|                                          |

|                                          |

|                                          |

|_____________________|

Pagina que eu estou a desenvolver:

______________________

|    |                                |    |

|    |                                |    |

|    |                                |    |

|    |                                |    |

|    |                                |    |

|    |                                |    |

|    |                                |    |

|    |                                |    |

|__|________________|__|

o div que eu tenho é para meter a parte do meio a branco, porque as partes laterais estao como imagem (background.png)

e ao retirar a cena do div no css ele vai ficar todo a preto, entendes? como é que posso fazer com que o div criado pelo calendário fique apenas noutro div com o determinado tamanho?

ps: são as melhores imagens do mundo xD

KTachyon unsigned user

KTachyon

Posted
Posted

Mão não defines todas as divs para serem assim. Defines uma div:

#layout_div { /* CSS que define o layout da página */ }

<div id="layout_div">
    <!-- Restante HTML que compõe a página -->
</div>

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

bLTR void

bLTR

Posted
  • Author
Posted

olha ve se assim ja está mais ou menos direito:

Login_registar.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<style media="all" type="text/css">@import "styles.css";</style>
<script language="javascript">

function testresultd()
{
//verifica nome_proprio
if(form_registo.nome_proprio.value=="")
{
	alert("O campo Nome Próprio está em branco!");
	form_registo.nome_proprio.focus();

}
//verifica apelido
if(form_registo.apelido.value=="")
{
	alert ("O campo Apelido está em branco!");
	form_registo.nome_proprio.focus();
}
//verifica username
if(form_registo.user.value=="")
{
	alert("O campo Username está em branco !");
	form_registo.user.focus();
}
//verfica username pelo menos 4 caracteres
if(form_registo.user.value.length>4)
{
	alert("O campo Username tem que ter pelo menos 4 caracteres !")
	form_registo.user.focus();
}

//verifica password
if(form_registo.password.value=="") 
{
	alert("O campo Password está em branco !");
	form_registo.password.focus();
}
//verifica password pelo menos 6 caracteres
if (form_registo.password.value.length>6)
{
	alert("O campo Password tem que ter pelo menos 6 caracteres !");
	form_registo.password.focus();
}
//verifica email
if (form_registo.email.value=="")
{
	alert("O campo Email está em branco !");
	form_registo.email.focus();
}
//verifica email correcto
parte1 = form_registo.email.value.indexOf("@");
    parte2 = form_registo.email.value.indexOf(".");
    parte3 = form_registo.email.value.length;
    if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) 
{
    alert ("O campo Email deverá ser escrito da seguinte forma xxx@xx.xx !");
form_registo.email.focus();
}
//verifica data de nascimento
if (form_registo.data_nascimento.value=="")
{
	alert("O campo data nascimento está em branco !");
	form_registo.data_nascimento.focus();
}
//verifica data nascimento bem preenchida
erro=0;
hoje = new Date();
    anoAtual = hoje.getFullYear();
    barras = form_registo.data_nascimento.value.split("/");
    if (barras.length == 3)
{
	dia = barras[0];
	mes = barras[1];
	ano = barras[2];
	resultado = (!isNaN(dia) && (dia > 0) && (dia < 32)) && (!isNaN(mes) && (mes > 0) && (mes < 13)) && (!isNaN(ano) && (ano.length == 4) && (ano <= anoAtual && ano >= 1900));
	if (!resultado) 
	{
		alert("O campo Data de Nascimento está invalido e deverá ser escrito da seguinte forma dd/mm/aaaa !");
		form_registo.data_nascimento.focus();
	}
} 
else 
{
	alert("O campo Data de Nascimento está invalido e deverá ser escrito da seguinte forma dd/mm/aaaa !");
	form_registo.data_nascimento.focus();
   }
   //verifica morada
   if (form_registo.morada.value=="")
   {
	alert("O campo Morada está em branco !");
	form_registo.morada.focus();
   }
   //verifica telefone
   if (form_registo.telefone.value=="")
   {
	alert("O campo Telefone está em branco !");
	form_registo.telefone.focus();
   }
   //verifica telefone apenas numeros
   if (isNaN(form_registo.telefone.value))
   {
	alert("O campo Telefone deve conter apenas números!");
	form_registo.telefone.focus();
   }
}

$(function() {
$( "#datepicker" ).datepicker({
	changeMonth: true,
	changeYear: true
});
});


</script>

</head>

<body>
<div>
<p align="center"><img src="/imagens/banners/banner00.png" height="200px" width="1000px" /></P>
<div id="global">
<div id="topo">
    <ul class="menu">
<li class="top"><a href="index.html" target="_self" class="top_link"><span>Inicio</span></a>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Produtos</span></a>
<ul class="sub">
<li><a href="pranchas.php" target="_self">Pranchas</a></li>
<li><a href="Fatos.php" target="_self">Fatos</a></li>
<li><a href="Pesdepato.php" target="_self">Pés de Pato</a></li>
<li><a href="leashs.php" target="_self">Leash's</a></li>
<li><a href="capas.php" target="_self">Capas para Pranchas</a></li>
<li><a href="acessorios.php" target="_self">Acessórios</a></li>
<li><a href="mochilas.php" target="_self">Mochilas</a></li>
<li><a href="dvd.php" target="_self">DVDs</a></li>
<li><a href="revistas.php" target="_self">Revistas</a></li>
</ul>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Contatos</span></a>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>FAQ</span></a>
<ul class="sub">
<li><a href="quemsomos.php" target="_self">Quem Somos</a></li>
<li><a href="encomendas.php" target="_self">Encomendas</a></li>
<li><a href="pagamento.php" target="_self">Pagamentos</a></li>
<li><a href="garantias.php" target="_self">Garantias</a></li>
<li><a href="glossarios.php" target="_self">Glossário</a></li>
</ul>
</li>
<li class="top"><a href="" target="_self" class="top_link"><span>Webcams</span></a>
<ul class="sub">
<li><a href="carcavelos.php" target="_self">Carcavelos</a></li>
<li><a href="guincho.php" target="_self">Guincho</a></li>
<li><a href="espinho.php" target="_self">Espinho</a></li>
<li><a href="costa_da_caparica.php" target="_self">Costa da Caparica</a></li>
<li><a href="praiagrande.php" target="_self">Praia Grande</a></li>
<li><a href="ericeira.php" target="_self">Ericeira</a></li>
</ul>
</li>
</ul>

<div class="conteudo">
<table width="1000">
<tr><td valign="top" width="50%" align="center">
<form action="login.php" method="post">
<table>
<tr><td align="center">
    	<img src="login_logo.jpg" /><br />
    </td></tr>
    <tr><td>
    	Username : <input type="text" name="user" id="user" />
    </td></tr>
    <tr><td>
   		Password : <input type="password" name="password" id="password"  />
    </td></tr>
    <tr><td align="center">
    	<input type="submit" value="Fazer LOGIN!" name="login" />
    </td></tr>
</table>
    </form>
    
    </td>
<td valign="top" align="center"  width="50%" id="LINHA_TABELA">

    <form name="form_registo" action="registo.php" method="post"  >
    <table>
    <tr><td align="center" valign="top">
    	<img src="registar_logo.jpg" /><br />
    </td></tr>
    <tr><td>
    	Nome Próprio : <input type="text" name="nome_proprio" id="nome_proprio" />
    </td></tr>
    <tr><td>
    	Apelido : <input type="text" name="apelido" id="apelido" />
    </td></tr>
    <tr><td>
    	Username : <input type="text" name="user" id="user"/>
    </td></tr>
    <tr><td>
    	Password : <input type="password" name="password" id="password" />
    </td></tr>
    <tr><td>
    	Email : <input type="text" name="email" id="email" /> (xxx@xx.xx)
    </td></tr>
<tr><td id="data">
    	Data de Nascimento : <input type="text" name="data_nascimento" id="datepicker">
    </td></tr>
    <tr><td>
    	Morada : <input type="text" name="morada" id="morada" />
    </td></tr>
    <tr><td>
    	Telefone : <input type="text" name="telefone" id="telefone" />
    </td></tr>
    <tr><td>
    	<input type="hidden" name="id" id="id" />
    </td></tr>
    <tr><td align="center">
    	<input type="submit" name="registar" onclick="testresultd()" value="Fazer Registo!" >
    </td></tr>
    </table>
    </form>
    
            	
</td></tr>
</table>
	</div>

</div>
</div>
</div>
</body>
</html>

styles.css

body 
{
background-color:000000; 
background-image:url(background.png);
background-repeat:repeat;
background-position:bottom left;
background-attachment:scroll;
}

/* TITLE */

h1
{
font-family:Cursive;
color:000000;
}

/* P */

p 
{
font-family:Cursive;
font-size:14px;
font-style:normal;
font-weight:normal;
color:000000;
}

/* DIV */

.conteudo 
{
background-color:#FFF; 
background-position:center; 
height:1000px;
width:1000px; 
margin: 0 auto ;
}

/* TABLE WEBCAMS */
.webcams 
{
margin-top:0px;
margin-right: 725px;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

/* TD TABLE WEBCAMS */

.webcams td 
{
border:0px;
}

/* DIV TABLE PRODUTOS */

.table_produtos 
{
height:0px; 
width:300px;
}

/* TABLE PRODUTOS */

.produtos 
{
margin-left:750px;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

}

/* TD TABLE PRODUTOS */

.produtos td 
{
border:0px;
}

/* BUTOES PAGINA ADMIN */
#button {
   border-top: 1px solid #807d80;
   background: #3d4042;
   background: -webkit-gradient(linear, left top, left bottom, from(#121314), to(#3d4042));
   background: -webkit-linear-gradient(top, #121314, #3d4042);
   background: -moz-linear-gradient(top, #121314, #3d4042);
   background: -ms-linear-gradient(top, #121314, #3d4042);
   background: -o-linear-gradient(top, #121314, #3d4042);
   padding: 4.5px 9px;
   -webkit-border-radius: 24px;
   -moz-border-radius: 24px;
   border-radius: 24px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #54734a;
   font-size: 15px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
#button:hover {
   border-top-color: #3b3a3b;
   background: #3b3a3b;
   color: #ffffff;
   }
#button:active {
   border-top-color: #333638;
   background: #333638;
   }

--

Edit(brunoais): O geshi usa HTML4strict 😉. Se escreveres HTML ele não reage.

bLTR void

bLTR

Posted
  • Author
Posted

Bom dia!

já esta a dar, mas ainda tenho mais um problemazinho xD

é o seguinte:

ele abre tudo normal mas ao clicar no dia, ele passa tudo bem para a caixa de texto, mas em vez de passar dd/mm/aaaa está a passar mm/dd/aaaa, como faço par resolver isso?

Cumprimentos

KTachyon unsigned user

KTachyon

Posted
Posted

Pah, tens que te começar a desenrrascar um bocadinho mais 😄

Se fores a http://jqueryui.com/demos/datepicker/ tens, em baixo, um conjunto de tabs, uma das quais chamada "Options". Ao abrires tens um conjunto de configurações possíveis. Aquela que pretendes é a dateFormat, que tem lá uns quantos exemplos de utilização.

Portanto, alteras o pedaço de código que te faz o calendário para:

$( "#datepicker" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd/mm/yyyy"
});

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

bLTR void

bLTR

Posted
  • Author
Posted

aproveito para dizer que o codigo que metes-te nao está totalmente correcto!

em vez de ser 4 "y's" são apenas 2 "y's" xD

$( "#datepicker" ).datepicker({
	changeMonth: true,
	changeYear: true,
	dateFormat: "dd/mm/yy"
});

outra coisa, estive a procura la cena das options como aumentar a data, por exemplo, so esta de 2012 ate 2002, eu queria aumentar isso. sabes me dizer o que é?

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.