Ver Mensaje Individual
  #2 (permalink)  
Antiguo 25/02/2012, 02:57
Avatar de rigobcastro
rigobcastro
 
Fecha de Ingreso: febrero-2012
Ubicación: Lejanías
Mensajes: 69
Antigüedad: 13 años
Puntos: 21
Respuesta: calendario emergente para rango de fechas

Usa jQuery y jQuery UI con su función datepicker. Y a los input les pones una clase en común para luego hacer el llamado del calendario.

Ejemplo completo del demo:

Código HTML:
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    
    <!-- Carga de librerias JS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    
    <!-- CSS Base para jQuery UI -->
    <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
    
    <!-- CSS para el demo -->
    <style>
    	.body{ font-family:Arial, Helvetica, sans-serif; }
		p { margin-bottom:1em; }
		input{ padding:.5em; }
    </style>
    
    <!-- Script que inicia el calendario -->
    <script>
                /** Colocar la clase que tienen lo input e iniciar el datepicker **/
		$(function() {
			$( ".calendario" ).datepicker();
		});
    </script>
    
    <title>Calendarios</title>
</head>

<body>
    <div>
        <p>Fecha comienzo: <input name="fecha_comienzo" type="text" class="calendario"></p>
        <p>Fecha termino: <input name="fecha_termino" type="text" class="calendario"></p>
    </div></body>
</html> 
Ejecuta este código tu mismo o mira el demo online desde jsFiddle http://jsfiddle.net/H75Qc/embedded/result/

Puedes usar la cantidad de calendarios que desees y cada uno guarda el valor individualmente en el input fijado, recuerda cambiar el atributo "name" para diferenciar los valores a la hora de subida del formulario.

Más información y creación de temas en la página de jQuery UI.

También lo puedes poner en español y agregar más funciones. Es lo mejor en cuestión de calendarios en formularios.

Saludos!

Última edición por rigobcastro; 25/02/2012 a las 03:08