Calendario con Mootools – JavaScript

Mootools CalendarHe aquí un interesante calendario elaborado con Mootools. La página del autor ofrece un ejemplo y documentación sobre las opciones que dispone. Además de los archivos necesarios: DataPicker.js y DataPicker.css. Necesitarán descargar la librería de Mootools v1.11 ó superior y algunas dependencias: Core, Class, Class.Extras, Array, String, Function, Number, Element, Element.Event, Element.Filters, Element.Selectors, Window.DomReady y Json.

Ejemplo

<html>
<head>
<title>MooTools DatePicker Ejemplo</title>

<link rel="stylesheet" href="DatePicker.css" type="text/css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/DatePicker.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
$$('input.DatePicker').each( function(el){
new DatePicker(el);
});
});
</script>

</head>
<body>
<div>
<h1>MooTools Date Picker</h1>
<p>
<label for="birthday">default calendar</label>
<input readonly="readonly" id="birthday" name="birthday" class="DatePicker" tabindex="1" value="10/24/2016" type="text">
</p>
<p>
<label for="new_day">calendar with all options</label>
<input readonly="readonly" id="new_day" name="new_day" class="DatePicker" alt="{
dayChars:3,
dayNames:['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
daysInMonth:[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
format:'dd-mm-yyyy',
monthNames:['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Deciembre'],
startDay:1,
yearOrder:'desc',
yearRange:90,
yearStart:2007
}" tabindex="1" value="02-08-2007" type="text">
</p>
</div>
</body>
</html>

6 thoughts on “Calendario con Mootools – JavaScript

  1. Disculpen mi ignorancia pero soy nuevo en esto, me parece una muy buena herramienta para usarla pero hasta ahora no he logrado capturar el valor q origina el datepicker podrian mostrame un ejemplo
    Gracias de antemano por su colaboracion

  2. puees, es simple, en la página donde mandes el formulario debes colocar algo similar a esto
    <?php
    echo $_POST['birthday'];
    echo "
    “;
    echo $_POST[‘newday’];
    ?>
    ‘birthday’ y ‘newday’, son los nombres de los input text del date picker, por eso las envia como post y las recupero de igual modo, espeor te sirva, cualquier problema escribeme
    hector2c@live.com

  3. una duda yo utilizo mootools 1.2 y parece que no funciona correctamente, podria alguier corroborarlo gracias de antemano

  4. Con mootools 1.12 funciona, siempre y cuando creen su versión de mootools con los componentes requeridos. En el código fuente de la página de los autores (que citan en este post) dicen cuáles son esos componentes.
    Core
    Class
    Class.Extras
    Array
    String
    Function
    Number
    Element
    Element.Event
    Element.Filters
    Element.Selectors
    Window.DomReady
    Json
    Y para crear el mootools como se requiere, ir a http://mootools.net/core, seleccionarlos y darle a Download.

  5. les hago una consulta, conocen alguna herramienta que tire un tipo datepicker pero con horas, con algun reloj o algo asi? yo vi uno hace un tiempo tambien hecho con mootols pero no funcionaba del todo bien, hay varias cosas que corregirle pero no tengo tiempo para hacerlo ahora y necesito uno que funcione bien, sin probemas, o sea un ANTI-USUARIO, jejeje gracias de antemano

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly powered by WordPress | Theme: Wanderz Blog by Crimson Themes.