ALLOY nos proporciona un calendario muy completo, con un funcionamiento muy parecido al tipo datepicker de JQuery. Como el resto de plugins, es muy sencillo de utilizar e implementar. Tan solo debemos configurar ciertos parámetros para adecuar el calendario a nuestras necesidades y listo.
Podemos ver un ejemplo de como quedaría el calendario en la siguiente imagen:
Ahora vamos a ver un ejemplo de uso del plugin y , a continuación, daremos una explicación sobre los principales parámetros que podemos usar.
AUI().ready('aui-calendar', function(A) {
var instance = new A.Calendar({
trigger: '#element',
dates: ['09/15/2009'],
dateFormat: '%d/%m/%y',
setValue: true,
selectMultipleDates: false
}).render();
});
El código anterior generaría un calendario sobre el input type="text" con id="#element" cuyo fecha por defecto sería el 09/15/2009 y su formato sería el de dia/mes/año.
Vamos a completar un poco la información anterior profundizando un poco más en cada uno de ellos y ampliando la lista:
trigger: Hace referencia al selector del elemento sobre el que hay que clicar para que aparezca el calendario. Por lo general es un input type="text". Necesita un string.
dates: Establece la fecha por defecto que aparece marcada en el calendario al abrirlo. Puede ser una o varias fechas y el formato tiene que ser el marcado en el ejemplo, separando cada fecha por coma.
dateFormat: El formato de la fecha que escribirá el calendario sobre el input. Necesita un string que contenga el formato. Podemos encontrar las diferentes posibilidades de formato en la siguiente dirección.
setValue: Si está a true el valor que marquemos en el calendario se copiará en el input de tipo text sobre el que se activa. Admite valores true o false.
selectMultipleDates: Permite seleccionar multiples fechas sobre un mismo calendario. Admite valores true o false.
maxDate: Marca la máxima fecha que mostrará el calendario para seleccionar. Necesita un string con la fecha.
minDate: Marca la mínima fecha que mostrará el calendario para seleccionar. Necesita un string con la fecha.
firstDayOfWeek: Establece si el primer día de la semana es el Domingo o el Lunes. Admite valores 0 (Domingo) o 1 (Lunes).
id: Asigna un id al calendario. Necesita un string.
cssClass: Asigna un class al calendario. Necesita un string.
Éstos son algunos de los múltiples parámetros configurables de los que dispone. Podeis ver toda la documentación en el siguiente enlace.