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>

Comentarios Comentarios formato RSS

  1. avatar luis 2009-11-06 08:51:53 6 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
  2. avatar Alfabravo 2009-01-04 00:20:38 5 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.
  3. avatar eslaier 2008-10-08 20:14:13 4 una duda yo utilizo mootools 1.2 y parece que no funciona correctamente, podria alguier corroborarlo gracias de antemano
  4. avatar hector2c 2008-02-29 15:39:17 3 puees, es simple, en la página donde mandes el formulario debes colocar algo similar a esto

    <?php
    echo $_POST['birthday'];
    echo "<br>";
    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
  5. avatar Tatiana A. 2008-02-08 14:29:20 2 Gracias, esta muy bueno....
  6. avatar Julio 2007-09-07 12:12:45 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

Dejar un comentario