Calendário

Outubro 23, 2008

Alá amigos,

Eu montei um site em PHP e tenho algumas páginas de pesquisas, por exemplo eu tenho uma página de oportunidades de emprego, nesta página eu tenho uma combo com os estados, e uma com as datas que existe no meu banco de dados e o botão de filtrar. Porém como já existem muitas datas eu gostaria de substituir essa combo de data por um calendário. Eu queria que tivesse a imagem de um pequeno calendário e quando o usuário clicasse abriria um mini calendário para ele escolher uma data. Assim que ele clicasse na data o calendário sumiria novamente mostrando na tela a data selecionada só para ele ver. Após ele poderia clicar no botão filtrar.

OBS: Essa operação de clicar no calendário escolher a data e tal seria na mesma tela, o usuário poderia escolher qualquer data se no banco existir tal data os dados serão carregados se não ficará vazio.... Portanto pode ser um calendário simples sem ter que acessar banco e tal

Não sei se fui claro na minha explicação. Mas se alguém puder me ajudar seria de grande ajuda.

Att, Igor Bastos Martins

http://www.oportunidadesembi.com.br

theodoro · Outubro 23, 2008

usa o Jquery ou prototype la tem calendário

Jonathan Queiroz · Outubro 23, 2008

Fiz um Script básico pra você entender o funcionamento

Olha isso aqui:

<html>
<head>
<script type="text/javascript">
var nome_mes
var numero_mes
var data_atual = new Date()

function ClicaDia(dia) {
x = document.getElementById("calendario")
x.style.visibility = "hidden"

y = document.getElementById("span_msgdata")
y.style.visibility = "visible"
a = document.getElementById("span_data")
a.style.visibility = "visible"
a.innerHTML = dia + "/" + eval(numero_mes+1) + "/" + data_atual.getFullYear()
b = document.getElementById("span_msgdata")
b.style.visibility = "visible"
document.form.botao_escolher_data.style.visibility = "visible"
c = document.getElementById("div_mostra_dias")
c.style.visibility = "hidden"
}

function AtualizaMes() {
switch (numero_mes) {
case 0:
nome_mes = "Janeiro"
quantidade_dias = 31
break
case 1:
nome_mes = "Fevereiro"
quantidade_dias = 28
break
case 2:
nome_mes = "Março"
quantidade_dias = 31
break
case 3:
nome_mes = "Abril"
quantidade_dias = 30
break
case 4:
nome_mes = "Maio"
quantidade_dias = 31
break
case 5:
nome_mes = "Junho"
quantidade_dias = 30
break
case 6:
nome_mes = "Julho"
quantidade_dias = 31
break
case 7:
nome_mes = "Agosto"
quantidade_dias = 31
break
case 8:
nome_mes = "Setembro"
quantidade_dias = 30
break
case 9:
nome_mes = "Outubro"
quantidade_dias = 31
break
case 10:
nome_mes = "Novembro"
quantidade_dias = 30
break
case 11:
nome_mes = "Dezembro"
quantidade_dias = 31
break
}
z.innerHTML = nome_mes
var valor=""
for (i=1;i<=quantidade_dias;i++) {
if (i/7==parseInt(i/7)) {
valor = valor + "<br>"
}
valor = valor + "<input type='button' name='calendaria_dia"+i+"' value='"+i+"' style='width: 50' onclick='ClicaDia("+i+")'>"
}
k = document.getElementById("div_mostra_dias")
k.innerHTML = valor

}

function EscolheData() {
x = document.getElementById("calendario")
x.style.visibility = "visible"

y = document.getElementById("span_data")
y.style.visibility = "hidden"
a = document.getElementById("span_data")
a.style.visibility = "hidden"
b = document.getElementById("span_msgdata")
b.style.visibility = "hidden"
document.form.botao_escolher_data.style.visibility = "hidden"
c = document.getElementById("div_mostra_dias")
c.style.visibility = "visible"

z = document.getElementById("span_nome_mes")
numero_mes = data_atual.getMonth()
if (z.innerHTML="data") {
AtualizaMes()
}

}
function ProximoMes() {
if (numero_mes<12) {
numero_mes = numero_mes+1
AtualizaMes()
}
}

function VoltaMes() {
if (numero_mes>=0) {
numero_mes = numero_mes-1
AtualizaMes()
}
}
</script>
</head>
<body>
<div id="calendario" name="calendario" style="visibility: hidden">
<input type="button" value="<" onclick="VoltaMes()">
<span id="span_nome_mes" name="span_nome_mes">data</span>
<input type="button" value=">" onclick="ProximoMes()">
</div>

<div id="pagina" name="pagina">
<span id="span_msgdata">Data: </span>
<span id="span_data" name="span_data" style="text-decoration: underline"><span style="color: red">Escolha uma data</span></span>
<form name="form" action="pagina2.htm" method="post">
<br><input type="button" name="botao_escolher_data" value="Escolher outra data" onclick="EscolheData()">
<div id="div_mostra_dias">

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

Obs.:

Tem formas mais fáceis de se fazer, fiz isso só pra você se basear (por exemplo, utilizando arrays, o que diminuiria várias linhas do código)

Agora é só você adaptar para o que você quer

Editado Outubro 23, 2008 por Jonathan Queiroz

Outubro 24, 2008

Amigos obrigado pela Ajuda,

Jonathan, eu criei uma página com o seu código e seria quase isso que estou querendo. Se não for pedir d++++ você saberia me explicar como eu poderia fazer nesse seu código para que quando eu clicasse no botão “Escolher outra data” ele carregasse uma DIV pequena sobre a minha página? Assim não daria a impressão que está mudando de tela.

E muito obrigado pelo código você entendeu exatamente o que eu queria.

Obrigado.

Entrar

Calendário

Pergunta

Guest --Igor --

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

theodoro

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Guest --Igor --

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades