calendario emergente

juilgarrido · #1 (**permalink**) 29/02/2012, 08:50

Amigos quiero saber como colocar un calendario emergente en un formulario, la idea es que el usuario al hacer clic en la caja de texto salga el calendario para que elija una fecha.......... espero me puedan explicar como hacerlo he tratado de implementarlo con algunos que he bajado desde la web pero no lo implementarlo en mi formulario php.

bray · #2 (**permalink**) 29/02/2012, 09:07

hola, si el calendario debe aparecer sin recargar la pagina entera, debes usar javascript ó algun framework como Jquery Mootools.., por otro lado si no te importa que se recargue toda la pagina ó bien que el calendario permanezca fijo en la pantalla, puedes hacer lo siguiente

Por ejemplo podrias crear un contador que cuente los dias segun su numero de segundos y emplear la funcion date para dibujar los dias de un mismo mes

Cita:

while (date('m',$contador_dias) == $mes){...}

donde contador dias emplea la marca de tiempo del dia de comienzo del mes y cuando aumentes dicho contador lo aumentaras segun el numero de segundos que tieen un día. la marca de tiempo en segundos de un determinado dia la puedes tomar con mktime(); pasando los parametros adecuados,

http://es.php.net/manual/es/function.mktime.php

dentro del while puedes dibujar los dias en una tabla donde cada dia sea un heckbox para que el usuario seleccione y cuyo valor(value) sea una fecha y la pasas junto con el resto del formulario.

Se que es todo un poco lioso , sobre todo el tema del manejo del tiempo (aunque es bastante facil) una vez visto) así que creo que lo mas sencillo es emplear algún calendario javascript y pasar su valor junto con el resto del form.

un saludo.

juilgarrido · #3 (**permalink**) 29/02/2012, 09:16

efectivamente necesito que no se recargue toda la pagina...... como puedo hacerlo con jquery...

bray · #4 (**permalink**) 29/02/2012, 09:20

aqui te dejo la documentacion del DatePicker de Jquery donde tienes ejemplos de código.

http://jqueryui.com/demos/datepicker/

bray · #5 (**permalink**) 29/02/2012, 09:21

tambien he encontrado este tutorial en español. http://www.webtips.es/selector-de-fechas-en-jquery/

juilgarrido · #6 (**permalink**) 29/02/2012, 10:34

Amigo he seguido todos los pasos pero no logro hacer que funcione en mi pagina php, porfa no se q estoy haciendo mal... mira adjunto el codigo.....

Código PHP:

  <?php 
include("conexion.php"); 
$rst_categorias=mysql_query("select * FROM categorias ORDER BY catnombre;",$conexion); 
if (mysql_num_rows($rst_categorias)==0) 
    //echo "No se han definido categorias";// 
    
?> 
 
<!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=iso-8859-1" /> 
<title>Protocolo Solicitud de Labor</title> 
<style type="text/css"> 
<!-- 
.Estilo1 {color: #0033FF} 
.Estilo2 {color: #FF0000} 
--> 
</style> 
<script type="text/JavaScript"> 
<!-- 
function MM_jumpMenu(targ,selObj,restore){ //v3.0 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); 
  if (restore) selObj.selectedIndex=0; 
} 
//--> 
</script> 
 
<script type="text/javascript" src="C:\xampp\htdocs\protocolo solicitud de labor\formularios\jqueryfechas\jquery.js"></script> 
<script type="text/javascript" src="C:\xampp\htdocs\protocolo solicitud de labor\formularios\jqueryfechas\date.js"></script> 
<script type="text/javascript" src="C:\xampp\htdocs\protocolo solicitud de labor\formularios\jqueryfechas\date_es.js"></script> 
<script type="text/javascript" src="C:\xampp\htdocs\protocolo solicitud de labor\formularios\jqueryfechas\jquery.datePicker.js"></script> 
<link rel="stylesheet" type="text/css" href="datePicker.css"  /> 
 
<script type="text/javascript"> 
$(function() 
{ 
    $('.date-pick').datePicker({clickInput:true}); 
}); 
</script> 
 
</head> 
<link rel="stylesheet" href="style.css" /> 
<body> 
<div id="content"> 
<form id="form1" name="form1" method="post" action="guardar.php"> 
  <div align="center"> 
    <p><img src="imagenes/header.png" width="744" height="150" />    </p> 
    <p align="center"><strong><em> Protocolo O.T. Mantenci&oacute;n</em></strong>.</p> 
    <p align="center" class="Estilo1"> 
    <fieldset></fieldset> 
    <p align="center"><label></label></p> 
    <table width="426" border="0" align="center"> 
      <tr> 
        <th scope="col"><div align="center">Almac&eacute;n Extraportuario El Sauce S.A.  
          <input type="hidden" name="estado" value="1" /> 
         </div></th> 
        </tr> 
    </table> 
     <table width="1000" height="238" border="0" align="center" cellpadding="0" cellspacing="0"> 
      <tr> 
        <th width="17%" height="31" scope="col"><div align="left">&Aacute;rea: <span class="Estilo2">* </span></div></th> 
        <th width="83%" scope="col"><div align="left"><input name="area" type="text" id="area" size="100" /> 
          </div> 
        </label></th> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Ubicaci&oacute;n:<span class="Estilo2"> * </span></div></td> 
        <td><label> 
          <div align="left"> 
            <input name="ubicacion" type="text" id="ubicacion" size="100" /> 
          </div> 
          </label></td> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Solicitante: <span class="Estilo2">* </span></div></td> 
        <td><label> 
          <div align="left"> 
            <input name="solicitante" type="text" id="solicitante" size="100" /> 
          </div> 
          </label></td> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Fecha:<span class="Estilo2"> * </span></div></td> 
        <td><label> 
          <div align="left"> 
           <input name="fecha" type="text" class="date-pick" id="fecha" size="50" /> 
            </label> 
          </div></td> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Hora: <span class="Estilo2">* </span></div></td> 
        <td><label> 
          <div align="left"> 
            <input name="hora" type="text" id="hora" size="50" /> 
            </label> 
          </div></td> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Ubicaci&oacute;n Mantenci&oacute;n<strong>: <span class="Estilo2">* </span></strong></div></td> 
        <td><div align="left"> 
          <p> 
            <input name="ubimantencion" type="text" id="ubimantencion" size="100" /> 
            </p> 
          </div></td> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Asignado A:<strong><span class="Estilo2">*</span></strong> </div></td> 
        <td><label> 
          <div align="left"> 
            <input name="asignadoa" type="text" id="asignadoa" size="80" /> 
            </div> 
        </label></td> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Fecha Inicio:<strong><span class="Estilo2">*</span></strong> </div></td> 
        <td><label> 
          <div align="left"> 
            <input name="fechaini" type="text" id="fechaini" size="50" /> 
            </div> 
        </label></td> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Fecha Termino:<strong><span class="Estilo2">*</span></strong> </div></td> 
        <td><label> 
          <div align="left"> 
            <input name="fechater" type="text" id="fechater" size="50" /> 
            </div> 
        </label></td> 
      </tr> 
      <tr> 
        <td height="23"><div align="left">Ayudantes:</div></td> 
        <td><label> 
          <div align="left"> 
            <input name="ayudantes" type="text" id="ayudantes" size="80" /> 
            </div> 
        </label></td> 
      </tr> 
    </table> 
    <p align="center"> 
      <label></label><fieldset> 
      <table width="1000" border="0"> 
        <tr> 
          <th width="198" scope="col"><div align="left">Categorias de Mantenci&oacute;n: <span class="Estilo2">*</span> </div></th> 
          <th width="786" scope="col"><div align="left"> 
              <select name="categoria" size="1" id="categoria"> 
                 <option selected=""VALUE="">[SELECIONE UNA CATEGORIA]</option> 
                  <?php  
          while ($fila=mysql_fetch_array($rst_categorias)) 
          { 
                  echo "<option VALUE='". $fila["catcodigo"] ."'>".$fila["catnombre"] ."</option>"; 
          } 
          mysql_close($conexion); 
          ?> 
           </select> 
          </div></th> 
        </tr> 
      </table> 
      <table width="1000" border="0" align="center"> 
        <tr> 
          <th width="220" height="42" scope="col"><div align="left">Selecione condici&oacute;n de Mantenci&oacute;n: <span class="Estilo2">* </span></div></th> 
          <th width="111" scope="col"><div align="center">Contingencia : </div></th> 
          <th width="44" scope="col"><label> 
              <div align="left"> 
                <input name="radiobutton" type="radio" value="Contingencia" /> 
              </div> 
            </label></th> 
          <th width="115" scope="col"><div align="center">Requerimiento : </div></th> 
          <th width="488" scope="col"><label> 
            <div align="left"> 
              <input name="radiobutton" type="radio" value="Requerimiento" /> 
            </div> 
            </label></th> 
        </tr> 
      </table> 
      <table width="1000" border="0"> 
        <tr> 
          <th width="312" scope="col"><div align="left">Detalle Observaciones de trabajos a realizar: <span class="Estilo2">*</span> </div></th> 
          <th width="678" scope="col"><label> 
              <div align="left"> 
                <textarea name="observaciones" cols="50" rows="10" id="observaciones"></textarea> 
              </div> 
            </label></th> 
        </tr> 
        <tr> 
          <th scope="col">&nbsp;</th> 
          <th scope="col"><label> 
          </label></th> 
        </tr> 
      </table> 
      <p><em><strong>//Los campos marcados con</strong></em><span class="Estilo2"> *</span> <em><strong>son obligatorios// </strong></em></p> 
      <p> 
        <label> 
        <input name="Guardar" type="submit" id="Guardar" value="Guardar" /> 
        </label> 
        <label></label> 
        <label> 
        <input type="submit" name="Submit3" value="Imprimir"  onclick="window.print();"/> 
        </label> 
      </p> 
      </fieldset> 
    </div> 
</form> 
<form id="form2" name="form2" method="POST" action="listado ot.php"> 
   
  <div align="center"> 
    <label></label> 
  </div> 
</form> 
</div> 
</body> 
</html>

en las lineas 29 a 40 hago el llamado.....

andresdzphp · #7 (**permalink**) 29/02/2012, 17:17

No creo que sea muy dificil seguir el ejemplo del manual oficial:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script type="text/javascript">
  $(document).ready(function() {
    $("#txtDate").datepicker();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<input type="text" id="txtDate" />
 
</body>
</html>