Hoy les presente un plugin para Mootools el cual les permitirá insertar rápidamente un calendario en nuestros formularios y con un resultado altamente atractivo y profesional. Se trata de Calendar una clase que permite incluir un selector de fecha no-obstrusivo y accesible.
Como usar Mootools Calendar
Lo primero es descargar la ultima versión de esta librería en calendar.js, además de ello es necesario tener Mootools el cual lo pueden descargar desde mootools.js, luego de ello debes crear un archivo CSS con los estilos que se aplicarán al calendario.
El siguiente paso es adjuntar las librerías Javascript a nuestro HTML y posteriormente los archivos CSS que contienen los estilos para nuestra página y nuestro calendario.
<!-- Incluimos el HTML --> <link href="styles.css" rel="stylesheet" type="text/css"> <link href="calendar.css" rel="stylesheet" type="text/css"> <!-- Incluimos los Javascript --> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/calendar.js"></script>
El siguiente paso es crear nuestro formulario en el cual debemos incluir un campo de texto el cual contendrá a nuestro selector de fechas.
<input type="text" name="fecha" id="fecha" size="16">
Finalmente inicializamos el Calendario con una llamada al objeto Calendar el cual recibe como parámetros el identificador del campo al cual deseamos asignar el calendario y luego el formato en el cual deseamos se muestren las fechas.
<script type="text/javascript">
window.addEvent('domready', function() {
myCal = new Calendar({ fecha: 'd/m/Y' });
});
</script>
Luego unimos todos los elementos para obtener el código final para mostrar un selector de fechas en nuestros formulario, todo de forma rápida y sencilla. Esta inicialización lo hacemos en el evento domready que es cuando se ha terminado de interpretar el html de nuestro web.
<html>
<head>
<title>Mootools Calendar</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="calendar.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
myCal = new Calendar({ fecha: 'd/m/Y' });
});
</script>
</head>
<body>
<h3>AGREGAR GASTO </h3>
<form method="post" name="registro">
...
Fecha:
<input type="text" name="fecha" id="fecha" size="16">
...
</form>
</body>
</html>
Desde luego lo que queda en adelante es agregarle los estilos de acuerdo al diseño de nuestro web y adecuarlo al formulario que tenemos. Les dejo un ejemplo en moocalendar y finalmente los archivos fuente de este ejemplo para que lo descarguen.
Comentarios Total 22 comentarios
Publicado: 25/06/2008 4:05 pm
esta bueno, conoces alguno similar para utilizar con jquery?
Publicado: 26/06/2008 7:35 am
[…] Enlace. Aprende MooTools: 20 ejemplos y tutoriales7 formas de aumentar tu creatividad en diseño webPrimera beta de Open Office 3 compatible con office 2007Scripts para crear “acordeones” con javascript Tags: javascript, mootools Puedes seguir los comentarios en el feed RSS 2.0 . Puedes dejar un comentario, o trackback desde tu propia web. […]
Publicado: 26/06/2008 7:42 am
Bueno el articulo, el calendario luce genial.
nahuel, yo si que he usado uno con jquery, si me da tiempo posteo luego un pequeño tutorial para usarlo y te paso el enlace
Publicado: 12/07/2008 4:16 am
HOla
esta filete el calendario.
solo tengo un problema, como puedo poner como primer dia de la semana el Lunes ya que el calendario por defecto trae el Domingo, gracias.
Publicado: 12/07/2008 4:39 am
ya lo consegi hay que editar en
calendar.js
offset:0 ponerlo a offset:1
y listo, tambien consegi traducirlo al español, desde Chile gracias.
Publicado: 13/10/2008 6:03 am
¿Ofrece la posibilidad de mostrar el calendario como parte de un contenido html o solo sirve para obetener fechas y mostrarlas en un input text ?
Publicado: 24/11/2008 6:27 am
Yo no puedo hacer funcionar este calencario, no tengo claro como indicarle donde realizó la llamada para abrir el calendario.
Gracias
Publicado: 09/02/2009 1:01 pm
Te faltaría solamente el boton de volver atrás. Pero gracias por las imagenes, porque en la pagina oficial no las dan.
Publicado: 09/02/2009 1:06 pm
Hay algo mucho peor. Al ir hacia adelante, desde febrero, salta a octubre, y encima al llegar a fin de año colapsa y queda en blanco.
Lo mismo con la version rc4, que baje de la pagina del autor.
Publicado: 10/02/2009 3:42 pm
No logro hacer que me pase el dato a la base de datos mysql, ya configure el calendario, y me muestra la fecha en el input, pero cuando le doy enviar al formulario, me pone vacio el campo Dia en la base de datos
Publicado: 14/02/2009 2:06 pm
Realmente tengo mis dudas acerca del script, puesto que la version «compatible» con Mootools 1.2 no me funciona (habiendo seleccionado todos los modulos y compresion JSmin, el cual pesa 32 Kb), ni siquiera con versiones anteriores, y pues veo ahi el inconveniente de la incompatibilidad con otros scripts de Mootools.
Si hay solucion para esto, agradeceria notificacion!
Publicado: 24/02/2009 8:13 am
He probado el calendario y me funciona correctamente.
Tan sólo me gustaría saber como puedo decirle para que por defecto me marque el día actual
Un saludo y gracias por adelantado
Publicado: 30/05/2009 12:21 pm
Hola, he hecho un mod de este recurso para soportar multiidioma, si alguien esta interesado al correo y le mando el calendar.js modificado.
Saludos
solchitos [at] hom*ail . com
Publicado: 13/09/2009 11:31 pm
Esta excelente este calendario ya lo hice funcionar solo tengo una duda, como hacerlo funcionar para ingresar dos fehas en un formulario: por que se ingresan dos imput box con valor de fecha pero solo funciona un imput box el otro no, si alguien sabe por favor pase la respuesta.
Publicado: 15/07/2010 6:20 pm
como se puede hacer que por ejemplo los lunes ni se puedan seleccionar?
un saludo!!
Publicado: 15/07/2010 11:03 pm
Para personalizar el calendario puedes leer la documentación oficial del script en http://www.electricprism.com/aeron/calendar/. Si te fijas hay un parámetro blocked que permite bloquear días en el calendario. Modificando la inserción del calendario deshabilitando todos los días lunes se tendría el siguiente código:
window.addEvent('domready', function() {myCal = new Calendar({ fecha: 'd/m/Y' }, { blocked: ['0 * 2007 1'] });
});
Publicado: 16/07/2010 4:16 am
Perfecto muchas gracias, sería así para todos los años
window.addEvent('domready', function() {myCal = new Calendar({ fecha: 'd/m/Y' }, { blocked: ['0 * * 1'] });
});
Un saludo!!
Publicado: 26/10/2010 7:53 pm
Excelente tuto, saludos!.
Publicado: 21/06/2011 8:27 am
Y para que no se puedan seleccionar los días que ya han pasado.
Como paran una agencia de viajes.
Saludos!!
Publicado: 21/08/2011 12:40 am
Una consulta.. como hago si deseo que esten habilitadas las fechas desde hoy en adelante ? (que no puedan seleccionarse fechas anteriores)
Y otra pregunta, es posible que de frente se muestren 2 calendarios juntos ? (Para la misma fecha, sólo que tenga una vista mas «panorámica») ?
Muchas gracias por anticipado !
Publicado: 13/09/2011 12:27 am
no he podido descargar los archivos, pues me interesan ya que esta version si corre en IE9
porfa denme una mano para obtener los archivos de descarga
saludos
Publicado: 14/10/2012 3:26 am
Estimado
Me fascinó la forma en que aborda sobre el tema.
Seguiré regresando esta página para continuar estimulándome sobre la
materia.
Muchas Gracias