Tutorial del componente DateChooser de Flash

Por Elecash el 22 de Julio de 2004 con 72,287 visitas.

Actionscript Masters Otros tutoriales por Elecash

DateChooser es un bonito componente que nos permite tener un calendario fcil de personalizar, y con el que podremos controlar la interactividad que tenga el usuario con el.
Con DataChooser podremos saber si el usuario est escogiendo un da en nuestro calendario, si cambia de mes, desactivar das en concreto o rangos de das enteros, entre
otras cosas.
Primero vamos a ver unas cuantas propiedades, como es costumbre, pon un componente DateChooser en tu librera, y veamos que podemos hacer con este componente.
Copia este cdigo:
//Atacheamos el componente
attachMovie("DateChooser", "mi_calendario", 1);
//Nombres de los dias y los meses que mostrar el calendario
mi_calendario.dayNames = ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"];
mi_calendario.monthNames = ["Enero", "Febrero", "Marzo", "Abril",
"Mayo", "Junio", "Julio", "Agosto",
"Septiembre", "Octubre", "Noviembre", "Diciembre"]
//Propiedades

mi_calendario.disabledDays = [0, 6];

mi_calendario.showToday = false;
mi_calendario.firstDayOfWeek = 1;
Con este sencillo cdigo hemos configurado nuestro calendario para que se vea de una forma ms "europea". Primero, hemos traducido los nombres en el calendario
mediante dayNames y monthNames. Es importante saber que el array de dayNames empieza por el domingo y acaba en el sbado, ya que est basado en el calendario
Ingls.
Lo siguiente que hemos hecho ha sido desabilitar los dias 0 y 6, que son domingo y sbado respectivamente, ahora estos das no se podrn seleccionar. Con showToday lo
que hacemos es deseleccionar el da en el que estamos actualmente. Si no ponemos esa lnea, de inicio nos aparece seleccionado el da de hoy. Por ltimo, mediante
firstDayOfWeek podemos cambiar cual ser el primer da de la semana. En este caso si ponemos 1, lunes ser el primer da de la semana, el valor predeterminado es 0,
siendo as el domingo como en los calendarios ingleses.
Qu ms podemos hacer en nuestro calendario? Pues vamos a desactivar las vacaciones de agosto, que en mi caso particular son del 1 al 15, cada uno que se lo
personalize como quiera, jeje. Aadamos estas lineas:
mi_calendario.disabledRanges = [{rangeStart: new Date(2004, 7, 1),
rangeEnd: new Date(2004, 7, 15)}];
Bien, ahora los das de agosto del 1 al 15 estn desactivados de forma que no se pueden clicar y as no me dan la vara en el trabajo XD. Fijaos que agosto es el mes 7, ya
que enero es el mes 0, esto es tpico de los arrays, ya que todos estan indexados desde 0, y no desde 1.
Ahora aadiremos el tpico listener para cuando cambiamos la fecha seleccionada. Aadir esto al final del cdigo:
//Listener para mostrar la fecha
alCambiar = new Object();
alCambiar.change = function(evento) {
//Cogemos la fecha y la partimos en tres variables para poder manejarla
fecha_date = new Date(evento.target.selectedDate);
dia = fecha_date.getDate();
mes = fecha_date.getMonth()+1;
ano = fecha_date.getFullYear();
trace("Has seleccionado el da "+dia+"/"+mes+"/"+ano);
};
//Creamos los listeners
mi_calendario.addEventListener("change", alCambiar);

Como podis ver, DateChooser, utiliza el objeto Date para almacenar la fecha, por eso nosotros aqu hemos creado un objeto Date nuevo para as partirlo en tres variables
(dia, mes, ano). As sabremos que da ha seleccionado el usuario.
Y para acabar, el otro evento que tiene el calendario. Hasta ahora, todos los componentes haban tenido un nico evento, pero veris ms adelante que los componentes
pueden tener dos, como en este caso, o ms incluso. El siguiente evento que tiene sirve para reconocer cuando cambiamos de mes:
//Listener para mostrar la fecha
alCambiar = new Object();
alCambiar.change = function(evento) {
//Cogemos la fecha y la partimos en tres variables para poder manejarla
fecha_date = new Date(evento.target.selectedDate);
dia = fecha_date.getDate();
mes = fecha_date.getMonth()+1;
ano = fecha_date.getFullYear();
trace("Has seleccionado el da "+dia+"/"+mes+"/"+ano);
};
alPasarMes = new Object();
alPasarMes.scroll = function(evento) {
trace("Has cambiado al mes de "+evento.target.monthNames[evento.target.displayedMonth]);
};
//Creamos los listeners
mi_calendario.addEventListener("change", alCambiar);
mi_calendario.addEventListener("scroll", alPasarMes);
Dejando nuestro cdigo como as, tenemos ya programados los dos listeners y listos para usar. El listener de scroll es muy til si por ejemplo, quisisemos hacer un calendario
con todas las fechas desactivadas para cada mes. Dentro de alPasarMes.scroll, podriamos tener una serie de if-else el cual nos identificase que mes hemos seleccionado, y
segn el mes seleccionado, que desactive unos meses u otros.
Veamos, como quedara el cdigo del listener scroll entonces:
//Listener para mostrar el mes
alPasarMes = new Object();
alPasarMes.scroll = function(evento) {
mestxt = evento.target.monthNames[evento.target.displayedMonth];
if (mestxt == "Junio") {
//Sant Joan
evento.target.disabledRanges = [{rangeStart:new Date(2004, 5, 24),

rangeEnd:new Date(2004, 5, 24)}];

} else if (mestxt == "Agosto") {
//Vacaciones de Agosto 8D
evento.target.disabledRanges = [{rangeStart:new Date(2004, 7, 1),
rangeEnd:new Date(2004, 7, 15)}];
}
trace("Has cambiado al mes de "+mestxt);
};
De esta manera, cuando estamos en Junio desactivamos el dia 24, y cuando estamos en Agosto, desactivamos del 1 al 15. Poniendo if-else para todos los meses tendriamos
un calendario personalizado para que nos mostrase las fiestas que tenemos al ao, algo realmente til, jejeje.
Pues con esto ya hemos visto todo de este interesante componente.