calendario emergente para rango de fechas

miguelcalla · #1 (**permalink**) 25/02/2012, 02:38

gente.
ya me canse de buscar y solo encuentro calendario emergente que solo puedo usar una ves por formulario ya intente cambiand el name="nombre_text" pero nada ,
y en mi caso requiero usar el mismo dos veces fecha_comienzo y fecha_termino

alguien a pasado por esta experiencia antes porf. que me pase el link o la forma como superar esto

rigobcastro · #2 (**permalink**) 25/02/2012, 02:57

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!

miguelcalla · #3 (**permalink**) 25/02/2012, 16:37

perfecto ahora como hago para ponerle un skin para que el calendario emergente se vea mas presentable ,animado

rigobcastro · #4 (**permalink**) 26/02/2012, 00:01

Puedes descargar uno de los temas de jQuery UI ya creados o personalizar el propio, luego de eso lo descargas y cambias al CSS base por el del tema que has descargado.

Llamado de los CSS y la librería cuando has descargado : http://jqueryui.com/download

Código para colocar cuando descargues JQuery UI con el tema:

Código HTML:

<link type="text/css" href="css/nombredeltema/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

Para la animación necesitas configurar la API del datepicker, osea establecer las opciones, por ejemplo, en el script que llama al datepicker, lo estableces de la siguiente manera

Código HTML:

$(function() {
	$( ".calendario" ).datepicker({
          showAnim: 'fold' // Cambias por el tipo de animación que deseas
       });
});

Más información: http://jqueryui.com/demos/datepicker/#animation

Puedes encontrar tutoriales especializados buscando por "jQueryUI Datepicker".

Saludos!

miguelcalla · #5 (**permalink**) 26/02/2012, 15:56

bien!, y para pone4r el icono de calendario al lado del input text