softrCalendar es un script para generar los famosos “date picker” para seleccionar una fecha. Está inicialmente inspirado en el date picker de P.O.R.K., pero corregido y aumentado. La parte visual se inspira en el date picker de zapatec, pero sin ocupar los 103kb que el suyo ocupa.

softrCalendar está disponible en las versiones 1.0 (para aquellos que ya tengan un proyecto con esta versión) y 1.11 (mejorada y optimizada) de MooTools.

Tamaño:

• versión 1.11: 4.57 kb comprimido y 7.68 kb sin comprimir.
• versión 1.0: 4.18 kb comprimido y 7 kb sin comprimir.

Requerimientos:

• Mootools 1.0 | Mootools 1.11
  • Dependencias:
    • Core - Core.js
    • Class - Class.js, Class.Extras.js
    • Native - Array.js, String.js, Function.js, Number.js, Element.js
    • Element - Element.Event.js, Element.Dimensions.js
    • Drag - Drag.Base.js, Drag.Move.js

Compatibilidad:

• Se ha probado en Mozilla Firefox e Internet Explorer 6

Descarga:

• softrCalendar 1.0 (librería comprimida y sin comprimir, MooTools y ejemplos) - 23kb (zip)
• softrCalendar 1.11 (librería comprimida y sin comprimir, MooTools y ejemplos) - 17kb (zip)

Cambios:

• Corregido bug para poder seleccionar el día en que comienza la semana
  $(’btnFecha’).addEvent(’click’,function(ev){new softrCalendar(”txtFecha”, {StartDay : 1}, ev);});

Instalación y uso:

1. Copiar la librería softrCalendar (softrCalendarSM.js) a tu proyecto, y hacer referencia a éste en la sección HEAD.
   • <script type=”text/javascript” language=”javascript” src=”mootools.v1.11.js”></script>
2. Llamar al método ‘domready’ del objeto window, para instancear softrCalendar. window.addEvent(’domready’,Site.start);
3. Llamar instancia de softrCalendar.
   1. var Site={
      start:function(){
      

      //El parámetro ev sólo es indispensable en la versión 1.11, y sirve para ubicar el calendario al dar click.

      $(’btnFecha’).addEvent(’click’,function(ev){new softrCalendar(”txtFecha”,ev);});
      }
      }

4. Personalizar el calendario a tu gusto en la hoja de estilo, softrCalendar.css
   

Documentación:

• softrCalendarSM.js
• clase: new softrRounded(/*string*/ targetInput, /*event*/ event);
  • targetInput: Es el elemento html input de tipo texto, que recibirá la fecha de softrCalendar.
  • event: Es el objeto event generado por el evento click de la imagen o elemento que funge como seleccionador.
• Ejemplos de la sintáxis:
  new softrCalendar(”txtFecha”,ev); // Para la versión 1.11
  new softrCalendar(”txtFecha”); // Para la versión 1.0

Ejemplo Funcionando