Calendario

Phantomluffy · #1 (**permalink**) 18/05/2010, 02:18

¿Conoceis alguna manera de poner un calendario en el formulario?, necesito ponerlo y que al hacer click en la fecha se escriba en el input correspondiente( necesitaría poner varios calendarios a la vez con distintos inputs, estilo fecha de comienzo y fecha de fin).

Gracias.

EikonData · #2 (**permalink**) 18/05/2010, 05:22

Este es el que uso yo:
[URL="http://www.dynarch.com/projects/calendar/"]http://www.dynarch.com/projects/calendar/[/URL]

Phantomluffy · #3 (**permalink**) 18/05/2010, 09:00

Y no habría ninguna forma de descargarlo sin licencia, he intentado copiarlo pero me faltan imagenes y no puedo tenerlo bien.

EikonData · #4 (**permalink**) 18/05/2010, 09:02

Pero... si como dicen en la web: "The version you can download from here is fully functional"
No hace falta licencia.

iovan · #5 (**permalink**) 18/05/2010, 09:19

Hola, yo usaria jQuery.

Mira te voy a decir una manera facil de lograrlo.

1.- Ve a este sitio: http://jqueryui.com/demos/datepicker/#default
2. - Observa ese ejemplo, es el que estabas buscando.

Ahora ve a downloads y descargate todo el paquete completo.

El archivo que se descargará se llama jquery-ui-1.8.1.custom.zip

Dentro de esta hay varios directorios, enfocate en los llamados ("css" y "js"). Estos muevelos intactos a tu servidor y has la inclusion de ellos correctamente en tu pagina donde quieras hacer uso del calendario

ejemplo

Código HTML:

Ver original<link type="text/css" href="./css/jquery-ui-1.8.1.custom.css" rel="stylesheet" />   
<script type="text/javascript" src="./js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
        $("#datepicker").datepicker();
            
               });
</script>

y la forma de llamarlo en el mismo documento es

Código HTML:

Ver original<input type="text" id="datepicker">

Asi de sencillo.
Saludos.

_________________________________
¿Me regalas un Karma?

Phantomluffy · #6 (**permalink**) 19/05/2010, 00:23

Si esto estaba buscando muchas gracias New

Y la forma para que se visualice con un botón al lado de un input type="text" para mostrar la fecha ahí?

iovan · #7 (**permalink**) 19/05/2010, 21:48

Para eso solo debes añadir esto al código

Código Javascript:

Ver originalshowOn: 'button',
            buttonImage: 'http://midominio.com/rutadelaimagen.gif',
            buttonImageOnly: true

En ruta de la imagen deberías de poner un iconito de calendario, puedes encontrar uno dentro de jquery-ui-1.8.1.custom\css\ui-lightness\images

El script completo quedaría así:

Código Javascript:

Ver original<link type="text/css" href="./css/jquery-ui-1.8.1.custom.css" rel="stylesheet" />   
<script type="text/javascript" src="./js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
        $("#datepicker").datepicker();
                                          showOn: 'button',
            buttonImage: 'images/calendar.gif',
            buttonImageOnly: true
               });
</script>

Saludos.

Phantomluffy · #8 (**permalink**) 20/05/2010, 00:26

Hola, gracias pero no me funciona. Mira te enseño el código

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />    
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $("#datepicker").datepicker();
                showOn: 'button',
                buttonImage: 'images/calendar.gif',
                buttonImageOnly: true
        });
        </script>
    </head>
    <body>
        <div id="datepicker"></div>
    </body>
</html>

He probado en vez de " <div id="datepicker"></div> " poner <input type="button" id="datepicker" > pero no me funciona.

iovan · #9 (**permalink**) 20/05/2010, 10:51

Hola amigo, verás estas haciendo mal la function en js.

Lo correcto es asi:

Código Javascript:

Ver original<script type="text/javascript">
    $(function() {
        $("#datepicker").datepicker({
            showOn: 'button',
            buttonImage: 'css/ui-lightness/images/calendar-blue.png',
            buttonImageOnly: true
                                    
                                    });
            
    });
    
                
            
        </script>

Te dejo la imagen de un icono de calendario bonito:

Tambien te dejo un pack con este ejemplo funcionando: http://www.4shared.com/file/5H3oj-kE/calendar.html

Saludos.

Phantomluffy · #10 (**permalink**) 21/05/2010, 01:49

Muchas gracias, muy amable por tu parte, ahora te dejo una ultima preguntita, a ver si sabes, sino pues nada. En el formulario que tengo que hacer tengo que poner varias fechas no solo una, me refiero a que tendria que poner varios campos con el calendario, este calendario se pondria debajo de cada foto y escribiria en su correspondiente(tipo.. fecha inicio y fecha fin.) o tendria que hacer algo?.

Muchas gracias de todos modos.Un saludo

iovan · #11 (**permalink**) 21/05/2010, 07:12

Hola, mira puedes poner cuantos calendarios quieras, sin embargo tambien debes poner el mismo numero de funciones.

ejemplo

Para poner 3 calendarios en textfields

Código Javascript:

Ver original$(function() {
        
            //Calendario 1
            $("#calendar1").datepicker({
            showOn: 'button',
            buttonImage: 'css/ui-lightness/images/calendar-blue.png',
            buttonImageOnly: true
                                    
                                    });
 
 
            //Calendario 2
            $("#calendar2").datepicker({
            showOn: 'button',
            buttonImage: 'css/ui-lightness/images/calendar-blue.png',
            buttonImageOnly: true
                                    
                                    });
 
            //Calendario 3
            $("#calendar3").datepicker({
            showOn: 'button',
            buttonImage: 'css/ui-lightness/images/calendar-blue.png',
            buttonImageOnly: true
                                    
                                    });
            
    });

y el HTML sería:

Código HTML:

Ver original<INPUT type="text" id="calendar1">
<INPUT type="text" id="calendar2">
<INPUT type="text" id="calendar3">

Esto sería un ejemplo, tu puedes de esta manera añadir cuantos calendarios quieras.
Saludos.

Phantomluffy · #12 (**permalink**) 24/05/2010, 00:32

Pues muchas gracias

Un saludo.

Prais · #13 (**permalink**) 28/01/2011, 21:36

ok, esta bien vistoso, pero estara en español.. ????

Saludos.-
-------------------------------------------------------

Prais · #14 (**permalink**) 29/01/2011, 14:28

Me Auto respondo, despues de probar muchas opciones, si se puede pasar al español llamando la libreria:

Código Javascript:

Ver original<script src="jquery.ui.datepicker-es.js"></script>

Lo que si, especial cuidado como ajustan a sus necesidades el calendario, ya que algunos estilos no son estandar y empiezan a importar estilos de otros archivos.
y tambien cuidado con las imagenes en themes. css, ya que hay que rutear donde les haremos referencia.
pero con ganas y un poco de logica y un tiempo, se puede ajustar el calendario a "N" posibilidades distintas, varias muy buenas por cierto.

Saludos.-
------------------------------------------------------