[Resolvido] Calendário Datepicker integrado com o PHP

P3rukao · Julho 26, 2009

Olá pessoal...

Estou querendo colocar uma agenda de eventos em meu site mas não consigo desenvolver um 'na unha'... do zero... no pouco tempo que tenho...

Estou querendo algo parecido com esses aqui:

Estilo Vista

jQuery Detepicker

O problema dos dois acima... eh que eu não sei como integrálos com PHP para listar meus eventos...

Eu tenho duas situações:

em UMA, o cara clica numa caixinha de texto (inputBox) e daí abre esse calendário para selecionar uma data. {este eu posso fazer com o jQuery, já que eu tenho preferência por este framework, e ele atende aos meus requisitos...}

em OUTRA, teria na lateral do site... um calendário, onde ficariam marcados (destacados) os dias em que houverem eventos. Estes eventos eu cadastraria na minha área administrativa. E o usuário teria a possibilidade de poder visualizar outros dias e meses... e/ou até anos... passando-os pelas setinhas ( < > ).

Alguém sabe como me ajudar nisso??

P3rukao · Agosto 13, 2009

Se alguem souber de alguma outra forma de montar um calendário de eventos bacana, também ajuda...

eu nunca fiz isso antes... por isso não tenho nem idéia de como desenrolar do zero!!!

Roberto_S_Luz · Agosto 13, 2009

E aí P3rukao só de boa cara?

Bom...muito bacana essas duas formas de calendarios aí, porém são um tanto quanto dificeis de aprender né.

Bom...tenho uma aki...que talvez lhe sirva;

Segue abaixo:


// **************************************************
// * Autor : Peter M Jordan - uranking@uranking.com *
// * página: www.uranking.com                       *
// **************************************************

// construindo o calendário
function popdate(obj,div,tam,ddd)
{
    if (ddd) 
    {
        day = ""
        mmonth = ""
        ano = ""
        c = 1
        char = ""
        for (s=0;s<parseInt(ddd.length);s++)
        {
            char = ddd.substr(s,1)
            if (char == "/") 
            {
                c++; 
                s++; 
                char = ddd.substr(s,1);
            }
            if (c==1) day    += char
            if (c==2) mmonth += char
            if (c==3) ano    += char
        }
        ddd = mmonth + "/" + day + "/" + ano
    }
  
    if(!ddd) {today = new Date()} else {today = new Date(ddd)}
    date_Form = eval (obj)
    if (date_Form.value == "") { date_Form = new Date()} else {date_Form = new Date(date_Form.value)}
  
    ano = today.getFullYear();
    mmonth = today.getMonth ();
    day = today.toString ().substr (8,3)
  
    umonth = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro")
    days_Feb = (!(ano % 4) ? 29 : 28)
    days = new Array (31, days_Feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)

    if ((mmonth < 0) || (mmonth > 11))  alert(mmonth)
    if ((mmonth - 1) == -1) {month_prior = 11; year_prior = ano - 1} else {month_prior = mmonth - 1; year_prior = ano}
    if ((mmonth + 1) == 12) {month_next  = 0;  year_next  = ano + 1} else {month_next  = mmonth + 1; year_next  = ano}
    txt  = "<table bgcolor='#efefff' style='border:solid #990033; border-width:2' cellspacing='0' cellpadding='3' border='0' width='"+tam+"' height='"+tam*1.1 +"'>"
    txt += "<tr bgcolor='#FFFFFF'><td colspan='7' align='center'><table border='0' cellpadding='0' width='100%' bgcolor='#990033'><tr>"
    txt += "<td width=20% align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano-1).toString())+"') class='Cabecalho_Calendario' title='Ano Anterior'><b><font color='#ffffff'><<</font></a></td>"
    txt += "<td width=20% align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_prior+1).toString() + "/" + year_prior.toString())+"') class='Cabecalho_Calendario' title='Mês Anterior'><b><font color='#ffffff'><</font></a></td>"
    txt += "<td width=20% align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_next+1).toString()  + "/" + year_next.toString())+"') class='Cabecalho_Calendario' title='Próximo Mês'><b><font color='#ffffff'>></font></a></td>"
    txt += "<td width=20% align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano+1).toString())+"') class='Cabecalho_Calendario' title='Próximo Ano'><b><font color='#ffffff'>>></font></a></td>"
    txt += "<td width=20% align=right><a href=javascript:force_close('"+div+"') class='Cabecalho_Calendario' title='Fechar Calendário'><b><font color='#ffffff'>X</font></b></a></td></tr></table></td></tr>"
    txt += "<tr><td colspan='7' align='right' bgcolor='#CCCCCC' class='mes'><a href=javascript:pop_year('"+obj+"','"+div+"','"+tam+"','" + (mmonth+1) + "') class='mes'>" + ano.toString() + "</a>"
    txt += " <a href=javascript:pop_month('"+obj+"','"+div+"','"+tam+"','" + ano + "') class='mes'>" + umonth[mmonth] + "</a> <div id='popd' style='position:absolute'></div></td></tr>"
    txt += "<tr bgcolor='#990033'><td width='14%' class='dia' align=center><b>Dom</b></td><td width='14%' class='dia' align=center><b>Seg</b></td><td width='14%' class='dia' align=center><b>Ter</b></td><td width='14%' class='dia' align=center><b>Qua</b></td><td width='14%' class='dia' align=center><b>Qui</b></td><td width='14%' class='dia' align=center><b>---<b></td><td width='14%' class='dia' align=center><b>Sab</b></td></tr>"
    today1 = new Date((mmonth+1).toString() +"/01/"+ano.toString());
    diainicio = today1.getDay () + 1;
    week = d = 1
    start = false;

    for (n=1;n<= 42;n++) 
    {
        if (week == 1)  txt += "<tr bgcolor='#CCCCCC' align=center>"
        if (week==diainicio) {start = true}
        if (d > days[mmonth]) {start=false}
        if (start) 
        {
            dat = new Date((mmonth+1).toString() + "/" + d + "/" + ano.toString())
            day_dat   = dat.toString().substr(0,10)
            day_today  = date_Form.toString().substr(0,10)
            year_dat  = dat.getFullYear ()
            year_today = date_Form.getFullYear ()
            colorcell = ((day_dat == day_today) && (year_dat == year_today) ? " bgcolor='#FFCC00' " : "" )
            txt += "<td"+colorcell+" align=center><a href=javascript:block('"+  d + "/" + (mmonth+1).toString() + "/" + ano.toString() +"','"+ obj +"','" + div +"') class='data'>"+ d.toString() + "</a></td>"
            d ++ 
        } 
        else 
        { 
            txt += "<td class='data' align=center> </td>"
        }
        week ++
        if (week == 8) 
        { 
            week = 1; txt += "</tr>"} 
        }
        txt += "</table>"
        div2 = eval (div)
        div2.innerHTML = txt 
}
  
// função para exibir a janela com os meses
function pop_month(obj, div, tam, ano)
{
  txt  = "<table bgcolor='#CCCCFF' border='0' width=80>"
  for (n = 0; n < 12; n++) { txt += "<tr><td align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+("01/" + (n+1).toString() + "/" + ano.toString())+"')>" + umonth[n] +"</a></td></tr>" }
  txt += "</table>"
  popd.innerHTML = txt
}

// função para exibir a janela com os anos
function pop_year(obj, div, tam, umonth)
{
  txt  = "<table bgcolor='#CCCCFF' border='0' width=160>"
  l = 1
  for (n=1991; n<2012; n++)
  {  if (l == 1) txt += "<tr>"
     txt += "<td align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+(umonth.toString () +"/01/" + n) +"')>" + n + "</a></td>"
     l++
     if (l == 4) 
        {txt += "</tr>"; l = 1 } 
  }
  txt += "</tr></table>"
  popd.innerHTML = txt 
}

// função para fechar o calendário
function force_close(div) 
    { div2 = eval (div); div2.innerHTML = ''}
    
// função para fechar o calendário e setar a data no campo de data associado
function block(data, obj, div)
{ 
    force_close (div)
    obj2 = eval(obj)
    obj2.value = data 
}

Utilizando ela:

<script type="text/javascript" src="../../scripts/calendario/calendario.js"></script>
 <input type="text" name="data_cadastro" value="<?=$pes_data_cadastro?>" size="15" maxlength="50" onkeyup="maskIt(this,event,'##/##/####')"> <input type="button" value="...." title="Calendario" title="Calendario" Onclick="javascript:popdate('document.form_funcionario.data_cadastro','pop8','150',document.form_funcionario.data_cadastro.value)"><span id="pop8" style="position:absolute"></span>

Espero que lhe sirva em algo http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Abraços e boa sorte aí http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

P3rukao · Agosto 19, 2009

E aí P3rukao só de boa cara?

Bom...muito bacana essas duas formas de calendarios aí, porém são um tanto quanto dificeis de aprender né.

Bom...tenho uma aki...que talvez lhe sirva;

Segue abaixo:

 
 // **************************************************
 // * Autor : Peter M Jordan - uranking@uranking.com *
 // * página: www.uranking.com                       *
 // **************************************************
 
 // construindo o calendário
 function popdate(obj,div,tam,ddd)
 {
     if (ddd) 
     {
         day = ""
         mmonth = ""
         ano = ""
         c = 1
         char = ""
         for (s=0;s<parseInt(ddd.length);s++)
         {
             char = ddd.substr(s,1)
             if (char == "/") 
             {
                 c++; 
                 s++; 
                 char = ddd.substr(s,1);
             }
             if (c==1) day    += char
             if (c==2) mmonth += char
             if (c==3) ano    += char
         }
         ddd = mmonth + "/" + day + "/" + ano
     }
   
     if(!ddd) {today = new Date()} else {today = new Date(ddd)}
     date_Form = eval (obj)
     if (date_Form.value == "") { date_Form = new Date()} else {date_Form = new Date(date_Form.value)}
   
     ano = today.getFullYear();
     mmonth = today.getMonth ();
     day = today.toString ().substr (8,3)
   
     umonth = new Array ("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro")
     days_Feb = (!(ano % 4) ? 29 : 28)
     days = new Array (31, days_Feb, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
 
     if ((mmonth < 0) || (mmonth > 11))  alert(mmonth)
     if ((mmonth - 1) == -1) {month_prior = 11; year_prior = ano - 1} else {month_prior = mmonth - 1; year_prior = ano}
     if ((mmonth + 1) == 12) {month_next  = 0;  year_next  = ano + 1} else {month_next  = mmonth + 1; year_next  = ano}
     txt  = "<table bgcolor='#efefff' style='border:solid #990033; border-width:2' cellspacing='0' cellpadding='3' border='0' width='"+tam+"' height='"+tam*1.1 +"'>"
     txt += "<tr bgcolor='#FFFFFF'><td colspan='7' align='center'><table border='0' cellpadding='0' width='100%' bgcolor='#990033'><tr>"
     txt += "<td width=20% align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano-1).toString())+"') class='Cabecalho_Calendario' title='Ano Anterior'><b><font color='#ffffff'><<</font></a></td>"
     txt += "<td width=20% align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_prior+1).toString() + "/" + year_prior.toString())+"') class='Cabecalho_Calendario' title='Mês Anterior'><b><font color='#ffffff'><</font></a></td>"
     txt += "<td width=20% align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+( "01/" + (month_next+1).toString()  + "/" + year_next.toString())+"') class='Cabecalho_Calendario' title='Próximo Mês'><b><font color='#ffffff'>></font></a></td>"
     txt += "<td width=20% align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+((mmonth+1).toString() +"/01/"+(ano+1).toString())+"') class='Cabecalho_Calendario' title='Próximo Ano'><b><font color='#ffffff'>>></font></a></td>"
     txt += "<td width=20% align=right><a href=javascript:force_close('"+div+"') class='Cabecalho_Calendario' title='Fechar Calendário'><b><font color='#ffffff'>X</font></b></a></td></tr></table></td></tr>"
     txt += "<tr><td colspan='7' align='right' bgcolor='#CCCCCC' class='mes'><a href=javascript:pop_year('"+obj+"','"+div+"','"+tam+"','" + (mmonth+1) + "') class='mes'>" + ano.toString() + "</a>"
     txt += " <a href=javascript:pop_month('"+obj+"','"+div+"','"+tam+"','" + ano + "') class='mes'>" + umonth[mmonth] + "</a> <div id='popd' style='position:absolute'></div></td></tr>"
     txt += "<tr bgcolor='#990033'><td width='14%' class='dia' align=center><b>Dom</b></td><td width='14%' class='dia' align=center><b>Seg</b></td><td width='14%' class='dia' align=center><b>Ter</b></td><td width='14%' class='dia' align=center><b>Qua</b></td><td width='14%' class='dia' align=center><b>Qui</b></td><td width='14%' class='dia' align=center><b>---<b></td><td width='14%' class='dia' align=center><b>Sab</b></td></tr>"
     today1 = new Date((mmonth+1).toString() +"/01/"+ano.toString());
     diainicio = today1.getDay () + 1;
     week = d = 1
     start = false;
 
     for (n=1;n<= 42;n++) 
     {
         if (week == 1)  txt += "<tr bgcolor='#CCCCCC' align=center>"
         if (week==diainicio) {start = true}
         if (d > days[mmonth]) {start=false}
         if (start) 
         {
             dat = new Date((mmonth+1).toString() + "/" + d + "/" + ano.toString())
             day_dat   = dat.toString().substr(0,10)
             day_today  = date_Form.toString().substr(0,10)
             year_dat  = dat.getFullYear ()
             year_today = date_Form.getFullYear ()
             colorcell = ((day_dat == day_today) && (year_dat == year_today) ? " bgcolor='#FFCC00' " : "" )
             txt += "<td"+colorcell+" align=center><a href=javascript:block('"+  d + "/" + (mmonth+1).toString() + "/" + ano.toString() +"','"+ obj +"','" + div +"') class='data'>"+ d.toString() + "</a></td>"
             d ++ 
         } 
         else 
         { 
             txt += "<td class='data' align=center> </td>"
         }
         week ++
         if (week == 8) 
         { 
             week = 1; txt += "</tr>"} 
         }
         txt += "</table>"
         div2 = eval (div)
         div2.innerHTML = txt 
 }
   
 // função para exibir a janela com os meses
 function pop_month(obj, div, tam, ano)
 {
   txt  = "<table bgcolor='#CCCCFF' border='0' width=80>"
   for (n = 0; n < 12; n++) { txt += "<tr><td align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+("01/" + (n+1).toString() + "/" + ano.toString())+"')>" + umonth[n] +"</a></td></tr>" }
   txt += "</table>"
   popd.innerHTML = txt
 }
 
 // função para exibir a janela com os anos
 function pop_year(obj, div, tam, umonth)
 {
   txt  = "<table bgcolor='#CCCCFF' border='0' width=160>"
   l = 1
   for (n=1991; n<2012; n++)
   {  if (l == 1) txt += "<tr>"
      txt += "<td align=center><a href=javascript:popdate('"+obj+"','"+div+"','"+tam+"','"+(umonth.toString () +"/01/" + n) +"')>" + n + "</a></td>"
      l++
      if (l == 4) 
         {txt += "</tr>"; l = 1 } 
   }
   txt += "</tr></table>"
   popd.innerHTML = txt 
 }
 
 // função para fechar o calendário
 function force_close(div) 
     { div2 = eval (div); div2.innerHTML = ''}
     
 // função para fechar o calendário e setar a data no campo de data associado
 function block(data, obj, div)
 { 
     force_close (div)
     obj2 = eval(obj)
     obj2.value = data 
 }

Utilizando ela:

 <script type="text/javascript" src="../../scripts/calendario/calendario.js"></script>
  <input type="text" name="data_cadastro" value="<?=$pes_data_cadastro?>" size="15" maxlength="50" onkeyup="maskIt(this,event,'##/##/####')"> <input type="button" value="...." title="Calendario" title="Calendario" Onclick="javascript:popdate('document.form_funcionario.data_cadastro','pop8','150',document.form_funcionario.data_cadastro.value)"><span id="pop8" style="position:absolute"></span>

Espero que lhe sirva em algo http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Abraços e boa sorte aí http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Olá Roberto... obrigado pela dica... mas aqui não funcinou não... eu montei como você indicou mas ele dá erro no php e não acontece nada ao tentar apertar o botão... você poderia me mostrar um exemplo dele funcionando???

Mas você tem certeza que esse seu exemplo se aplica as minhas necessidades?? Pelo que eu subentendi dele... irá aparecer um calendário datepicker somente quando o usuario clicar no input e/ou no botão... =/

É isso mesmo??

Roberto_S_Luz · Agosto 19, 2009

Bom...o que acontece é o seguinte....irá aparecer o calendario apenas quando o usuario clicar no botão ou imagem, enfim...bom como eu disse anteriormente

Bom...tenho uma aki...que talvez lhe sirva;

Bom...mais de acordo com o os outros que você mostrou, irá aparecer o calendario quando clica no input e não em um botão correto, pois é...esse meu aki...ele abre quando eu clico num botão pq eu coloquei o botão para fazer isso mais...acaberei de testar aki e coloquei-o dentro de um input e prestou belezinha tambem.

Bom...segue abaixo uma demonstração de funcinamento (em imagem) Imagem Postada

Observe que os dois primeiros calendários é acionado atravez do botão...e o 3º atraves do proprio input, bom...aí vai do gosto de cada um.

Bom...irei postar um form completo com os exemplos ok.

Form

<script type="text/javascript" src="../../scripts/calendario/calendario.js"></script>
 <form action="cadastrar_funcionario.php" method ="post" name="form_funcionario" OnSubmit="Javascript: return valida_form_funcionario();">
	      <!-- <div id="div_table">-->
	      <table  align="left" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
			  <td>
			     <div id="formularios"><br> Nome:</div>
			  </td>
			  <td><br>
			  	<input type="text" name="nome" value="" size="60" maxlength="80" onkeyup="this.value = this.value.toUpperCase();"><?= $obrigatorio?>
			  </td>
			</tr>
			<tr>
			  <td><br>
			       <div id="formularios"> Sexo</div>
			  </td>
			  <td><br>
			        <select name="sexo">
						<option value="0">   -- Escolha uma Opção--</option><?= $obrigatorio?>
	                       <option value="0"> </option>
	                      		<?=
	                         		$sexo->consultar();
	                      		?>
                    </select>
					
				    <font size="2"><b>   Data/Nasc.:</b></font>
					 <input type="text" name="data_nasc" value="" size="12" onkeyup="maskIt(this,event,'##/##/####')"><?= $obrigatorio?> <input type="button" value="..." title="Calendario" style="position:absolute;cursor:pointer" Onclick="javascript:popdate('document.form_funcionario.data_nasc','pop1','150',document.form_funcionario.data_nasc.value)"><span id="pop1" style="position:absolute"></span>
					 
	           </td>
             </tr>
             
              <tr>
			    <td>
			       <div id="formularios"><br> CPF:</div>
			    </td>
			    <td><br>
			       <input type="text" name="cpf" size="15" maxlength="14" value="" onkeypress="maskIt(this,event,'###.###.###-##')" onChange="validarCPF();"><?= $obrigatorio?>
			       
			       <font size="2"><b>     RG:</b></font> 
			       <input type="text" name="rg" value="" size="15" maxlength="20" onkeyup="this.value = this.value.toUpperCase();"><?= $obrigatorio?>
			     </td>
			  </tr>
			  <tr>
			    <td>
			       <div id="formularios"><br> Telefone Res.:</div>
			    </td>
			    <td><br>
			  	   <input type="text" name="fone1" size="15" value="" onkeyup="maskIt(this,event,'####-####')">
			       
			       <font size="2"><b>     Telefone Cel.:</b></font>
			       <input type="text" name="fone2" size="15" value="" onkeyup="maskIt(this,event,'####-####')">
			     </td>
			 </tr>
             <tr>
			    <td><br>
			       <div id="formularios"> Cargo:</div>
			    </td>
			    <td><br>
			      <select name="cargo">
                      <option value="0">       -- Escolha um Cargo --</option>
                       <option value="0"> </option>
                        <?=
                        	$cargo->consultar();
                         ?>
                   </select><?= $obrigatorio?>  <a href="#" style="text-decoration:none" onClick="window.open('../cargo/form_cargo.php','Janela','scrollbars=0,resizable=0,menubar=0,toolbar=0,location=0,status=0,top=400,left=450,width=430,height=220');return false;"><input type="image"src="../../../imagens/icones/botoes/novo.jpg" width="40"  height="18" style="position:absolute;" title="Cadastrar um novo Cargo"></a>
                </td>
             </tr>
             <tr>
			    <td><br>
			       <div id="formularios"> CNH/Cat.:</div>
			    </td>
			    <td><br>
			        <input type="text" name="cnh" value="" size="5" maxlength="6" onkeyup="this.value = this.value.toUpperCase();"><?= $obrigatorio?>
			        
			        <font size="2"><b>     CNH/N. Serie</b></font> 
			        <input type="text" name="num_serie_cnh" size="15" onkeyup="somente_numero(this);" maxlength="11"><?= $obrigatorio?>
			    </td>
			</tr>
			<tr>
				<td><br>
			       <div id="formularios"> Data/Venc.:</div> 
			    </td>
			    <td><br>
			    	<input type="text" name="data_venc" value="" size="12" onkeyup="maskIt(this,event,'##/##/####')"><?= $obrigatorio?> <input type="button" value="..." title="Calendario" style="cursor:pointer" Onclick="javascript:popdate('document.form_funcionario.data_venc','pop2','150',document.form_funcionario.data_venc.value)"><span id="pop2" style="position:absolute"></span>
					 
					 <font size="2"><b>        Venc./Ex./Per:</b></font> 
					<input type="text" name="venc_ex" value="" size="12" onkeyup="maskIt(this,event,'##/##/####')"><?= $obrigatorio?> <input type="button" value="..." title="Calendario" style="cursor:pointer" Onclick="javascript:popdate('document.form_funcionario.venc_ex','pop3','150',document.form_funcionario.venc_ex.value)"><span id="pop3" style="position:absolute"></span>
			    </td>
			</tr>
			<tr>
			    <td>
			       <div id="formularios"><br> Data/Admissão:</div>
			    </td>
			    <td><br>
			        <input type="text" name="admissao" value="" size="12" onkeyup="maskIt(this,event,'##/##/####')"><?= $obrigatorio?> <input type="button" value="..." title="Calendario" style=cursor:pointer" Onclick="javascript:popdate('document.form_funcionario.admissao','pop4','150',document.form_funcionario.admissao.value)"><span id="pop4" style="position:absolute"></span> 
			         
			    </td>
		   </tr>
           <tr>
			    <td>
			       <div id="formularios"><br> E-Mail / Site:</div>
			    </td>
			    <td><br>
			       <input type="text" name="m_s" value="" size="50" maxlength="50" onblur="ValidaEmail();">
			    </td>
		  </tr>
          <tr>
			    <td>
			       <div id="formularios"><br> Endereço:</div>
			    </td>
			    <td><br>
			       <input type="text" name="endereco" value="" size="40" maxlength="80" onkeyup="this.value = this.value.toUpperCase();"><?= $obrigatorio?>
			    </td>
	     </tr>
	     <tr>
			    <td>
			       <div id="formularios"><br> Bairro:</div>
			     </td>
			     <td><br>
			       <input type="text" name="bairro" value="" size="20" maxlength="50" onKeyUp="this.value = this.value.toUpperCase();"><?= $obrigatorio?>
			    </td>
	    </tr>
	    <tr>
			    <td>
			       <div id="formularios"><br> Estado:</div>
			    </td>
			    <td><br>
			       <select name="estado" onChange="Dados(this.value);">
			       	 <option value="0"> -- UF --</option>
			         <?=
			            $estado->consultar();
			         ?>
                   </select><?= $obrigatorio?> <a href="#" style="text-decoration:none" onClick="javascript:window.close(); window.open('../estado/form_estado.php','Janela','scrollbars=0,resizable=0,menubar=0,toolbar=0,location=0,status=0,top=400,left=450,width=350,height=180'); return false;"><input type="image" src="../../../imagens/icones/botoes/novo.jpg" width="40"  height="18" style="position:absolute;" title="Cadastrar um novo Estado"></a>
                </td>
         </tr>
         <tr>
			    <td>
			       <div id="formularios"><br> Municipio:</div>
			    </td>
			    <td><br>
			       <select name="municipio">
			          <option id="opcoes" value="0">--Primeiro selecione o estado--</option>
                   </select><?= $obrigatorio?> <a href="#" style="text-decoration: none" onClick="window.open('../municipio/form_municipio.php','Janela','scrollbars=0,resizable=0,menubar=0,toolbar=0,location=0,status=0,top=400,left=450,width=400,height=215'); return false;"><input type="image" src="../../../imagens/icones/botoes/novo.jpg" width="40"  height="18" style="position:absolute;" title="Cadastrar um novo Municipio"></a>
                </td>
         </tr>
         <tr>
			    <td>
			       <div id="formularios"><br> Data/Cadastro</div>
			     </td>
			     <td><br>
			       <input type="text" name="data_cadastro" value="<?=date("d/m/Y")?>" size="15" maxlength="50" onKeyUp="this.value = this.value.toUpperCase();" Onclick="javascript:popdate('document.form_funcionario.data_cadastro','pop5','150',document.form_funcionario.data_cadastro.value)"><span id="pop5" style="position:absolute"></span>
			    </td>
	    </tr>
        <tr>
			    <td valign="top">
			       <div id="formularios"><br> Complemento:</div>
			    </td>
			    <td><br>
			       <textarea name="complemento" rows="5" cols="50" onkeyup="this.value = this.value.toUpperCase();"></textarea><br><br>
			    </td>
			   
        </tr>
         <tr>
		      <td align="right" colspan="6">
		        	 <?= $obrigatorio?> <font color="blue" size="2"><b>= Campos obrigatórios  </b></font>
		      </td>
		 </tr>
        <tr>
            	<td colspan="2" align="center" bgcolor="#999999" width="100%">
                    
                    <input type="submit" name="cad" value="Cadastrar">
                    <input type="reset" name="limpar" value="Limpar Campos">
                                
			</td>
		</tr>	
	</table>
	
</form>

Daí o arquivo JavaScript com o calendário é o mesmo que postei antes ok.

Daí...você deve se atentar aonde você está colocando o arquivo e o caminho para busca-lo, por exemplo:

Esse daki é o caminho que o meu form faz para buscar o calendario

<script type="text/javascript" src="../../scripts/calendario/calendario.js"></script>

Talvez....o se aí deve esta´dando erros por causo disso, lembro-me bem que, quando tava testando esse arquivo aki, dava o mesmo erro.

Bom...qualquer coisa, posta aí os seus codigos ok, tanto o form e a parte que chama o arquivo js beleza!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Abraços.... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

P3rukao · Agosto 20, 2009

Erm... eu testei aqui dinovo... e não era o link do javascript não {ele está correto}, mas ainda não funcionou...

Então para este caso... eu coloquei uma imagenzinha ao lado do input e utilizei o jQuery UI {LINK} para reproduzir este efeito...

Mas o calendário que eu mais necessito no momento mesmo eh do que já aparece INLINE na tela... sem precisar clicar em nada... e que nele, eu possa DESTACAR os dias que possuem eventos cadastrados no meu banco de dados... com aquela opção de poder passar os meses com as setinhas....

Mas obrigado pela ajuda aí Roberto... se eu conseguir fazer funcionar eu te dou um toque.. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Roberto_S_Luz · Agosto 20, 2009

E aí P3rukao beleza cara...

Mas o calendário que eu mais necessito no momento mesmo eh do que já aparece INLINE na tela... sem precisar clicar em nada...e que nele, eu possa DESTACAR os dias que possuem eventos cadastrados no meu banco de dados...

Bom...sobre a parte de DESTACAR os dias que possuem eventos eu não sei como fazer pois não trabalho com o JQuery(ainda, mais já estou baixando umas videos aulas para aprender.), mas...sobre a parte dele já aparecer INLINE na tela, você pode fazer o seguinte:

Da forma que está,para o calendario aparecer, você cria um evento OnClick="" e coloca a parada lá dentro né. Bom...no seu caso você pode criar um evento OnLoad="" dentro da tag <body onload=""> e colocar o comando de puxar o calendario lá dentro. Desta forma, toda vez que você entrar no tal formulario, ele irá carregar o calendario automaticamente(assim eu espero...rsss http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif ).

Fiz o teste aki e funcionou:

<body onload="javascript:popdate('document.form_funcionario.data_nasc','pop1','150',document.form_funcionario.data_nasc.value)">

Bom...o modelo de calendario que lhe passei não funcionou aí, mais já que o seu está funcionando e caso você quiser tirar a imagem e deixar o aparecimento automatico, faz isso aí, que pode funcionar ok, e além do mais...gostei do modelo desse calendario com JQuery é bem melhor do que o que uso atualmente...porém ele não é em portugues.

Bom...depois quando conseguir, posta a solução aí pra galera, pois...eu mesmo irei querer colocar esse tipo de calendarios em meus sistemas, pois sõa mais personalizados.http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Abraços amigo e boa sorte aí http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

P3rukao · Agosto 20, 2009

isso mesmo... mas se você baixar o pacote completo de um tema do UI jQuery... eh soh você pegar dentro de uma das pastas da biblioteca que ele te manda... e depois usar uma função que configura o idioma..

Aqui funcionou direitinho com ele.... ;)

- Mas ainda não achei em lugar nenhum um que faça a minha segunda opção de calendário... que eh a que eu preciso mais!!!

Roberto_S_Luz · Agosto 20, 2009

que eh a que eu preciso mais!!!

Bom...pesquisando sobre o seu problema achei esse topico, ver se lhe serve

Calendarios com eventos

Boa sorte!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

P3rukao · Agosto 20, 2009

Eita bixiiiga!!! era esse mesmo...

O que é que uma pequena busca no fórum naum faz num eh msm?!! {¬¬}

Vou tentar implementá-lo-ele pra ver se funciona... mas o estilo do calendário que eu estava falando era esse mesmo... xD

No mais... axo que o plugin do jQuery e este exemplo aí... já satisfazem a maioria das necessidades de quem precisa de calendários para sites... :P

Brigadaum pela ajuda Roberto... O.º)

Abraço []'s

Roberto_S_Luz · Agosto 20, 2009

Claro...disponha sempre...

Sucesso pra você meu amigo http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Abraços!!!

P3rukao · Agosto 21, 2009

Só para constar... o estilo do calendário eh aquele mesmo... mas quando eu tento adapta-lo-ele para o meu site ele para de funcionar... não exibe nada... e eu já ajeitei todos os caminhos para os arquivos includes e scripts que são necessários... =/

P3rukao · Agosto 21, 2009

Eu consegui aqui já... mas foi usando outro script: foi com o Quick-Calendar

Ele eh bem bacana... topo OO e você ainda pode personalizar os temas da maneira que quiser...^^

Ainda eh um pouquinho complicadinho para alterar as coisas na programação... e também porque está em Inglês... mas com um pouquinho de conhecimento na área dá pra usar legal ele.. ;)

Arquivado

[Resolvido] Calendário Datepicker integrado com o PHP

Recommended Posts

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Roberto_S_Luz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Roberto_S_Luz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Roberto_S_Luz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Roberto_S_Luz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Roberto_S_Luz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante