sábado, 21 de agosto de 2010

YUI 3 JavaScript Alloy Calendar Set MinDate

El post donde nace es (pero en español puedo ser más locuaz):
http://yuilibrary.com/forum/viewtopic.php?f=206&t=4122&start=0&sid=1ea15b5959719f92d8ab84a660bd4f80


Aclaro que se trata de un método de fuerza bruta para obtener un comportamiento que el objeto no proporciona. Así que debe considerarse como una herramienta de prototipado, sólamente para mostrar "el concepto".
El truco es destruir el objeto conservando su estado interno. En este caso, se trata de un objeto complejo: un widget en javascript que muestra un calendario. Pero puede ser cualquier cosa, desde un desarrollo propio hasta un objeto comprado por el que hay que esperar una actualización.

En este caso, el widget no provee (por ahora) una función que permita establecer minDate luego de haber dibujado el calendario. Aprovecharemos los eventos personalizados y funciones de YUI 3. También un mecanismo del mismo componente: un evento que informa una selección de fecha. Advierto que puede ser una patada para el browser si se usa en forma intensiva.
En este ejemplo, el calendario establece su propio minDate en un ciclo infinito.
//Alloy calendar
function newCalendar(oMinDate) {
 new A.Calendar({
  id: 'xxCal',
  trigger: '#input1',
  dateFormat: '%m/%d/%Y',
  setValue: true,
  minDate: oMinDate,
  maxDate: null,
  firstDayOfWeek: 0,
  on: {
   select: function (event) {
    A.fire('calMinDate:newMinDate', 
      event.date.formatted.toString());
   }
  }
 }).render()
}
//Destroy DOM elements and make new calendar object
function crtlCalendar(calMinDate) {
    A.Node.one('#xxCal').set('innerHTML', '');
    A.Node.one('#xxCal').remove();
    newCalendar(calMinDate);
}
//Our custom eventhandler
A.on('calMinDate:newMinDate', crtlCalendar);

//Now, our first object
newCalendar('08/24/2010');


El equivalente apropiado, si existiera (pero existirá), sería:

new A.Calendar({
 id: 'xxCal',
 trigger: '#input1',
 dateFormat: '%m/%d/%Y',
 setValue: true,
 minDate: oMinDate,
 maxDate: null,
 firstDayOfWeek: 0,
 on: {
  select: function (event) {
   this.setMinDate(
     event.date.formatted.toString());
  }
 }
}).render()


Este mecanismo tiene nombre, se llama "continuación".

Un experimento previo con YUI 3 es un MVC "hello world" que busca mostrar el concepto de Modelo Vista Controlador en forma concreta.

No hay comentarios: