Mootools Calendar
- 24/06/2008
- 10:37 pm
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.
-
<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>
-
<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.
Posts Relacionados
- Swiff: Mootools Flash Plugin
- Introducción a Mootools
- Google AJAX Libraries API
- Mootools Image Cropping
- Textareas escalables
Total de Comentarios: 5
[...] 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. [...]
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
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.
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.
