Tutorial del componente DateChooser de Flash

DateChooser es un bonito componente que nos permite tener un calendario fácil 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 día en nuestro calendario, si cambia de mes, desactivar días en concreto o rangos de días enteros, entre otras cosas.

Primero vamos a ver unas cuantas propiedades, como es costumbre, pon un componente DateChooser en tu librería, y veamos que podemos hacer con este componente. Copia este código:

//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 código hemos configurado nuestro calendario para que se vea de una forma más "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 sábado, ya que está basado en el calendario Inglés.

Lo siguiente que hemos hecho ha sido desabilitar los dias 0 y 6, que son domingo y sábado respectivamente, ahora estos días no se podrán seleccionar. Con showToday lo que hacemos es deseleccionar el día en el que estamos actualmente. Si no ponemos esa línea, de inicio nos aparece seleccionado el día de hoy. Por último, mediante firstDayOfWeek podemos cambiar cual será el primer día de la semana. En este caso si ponemos 1, lunes será el primer día de la semana, el valor predeterminado es 0, siendo así el domingo como en los calendarios ingleses.

¿Qué más 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. Añadamos estas lineas:

//Vacaciones de Agosto 8D
mi_calendario.disabledRanges = [{rangeStart: new Date(2004, 7, 1),
								 rangeEnd: new Date(2004, 7, 15)}];

Bien, ahora los días de agosto del 1 al 15 están 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 típico de los arrays, ya que todos estan indexados desde 0, y no desde 1.

Ahora añadiremos el típico listener para cuando cambiamos la fecha seleccionada. Añadir esto al final del código:

//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 día "+dia+"/"+mes+"/"+ano);
};
//Creamos los listeners
mi_calendario.addEventListener("change", alCambiar);

Como podéis 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 día ha seleccionado el usuario.

Y para acabar, el otro evento que tiene el calendario. Hasta ahora, todos los componentes habían tenido un único evento, pero veréis más adelante que los componentes pueden tener dos, como en este caso, o más 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 día "+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 código como así, tenemos ya programados los dos listeners y listos para usar. El listener de scroll es muy útil si por ejemplo, quisiésemos 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 según el mes seleccionado, que desactive unos meses u otros.

Veamos, como quedaría el código 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 año, algo realmente útil, jejeje.

Pues con esto ya hemos visto todo de este interesante componente.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo