Componente DateField

El componente DateField permite que el usuario de nuestra aplicación seleccione una fecha dentro de un calendario que es mostrado cuando se hace click en este componente. La ventaja principal del DateField es que el usuario nunca ingresará una fecha incorrecta (por ejemplo 31 de abril); además de que podemos establecer un rango de fechas dentro de las cuales el usuario puede hacer su elección, o bien deshabilitar fechas.

Este componente tiene los siguientes parámetros:

• dayNames: Arreglo con los nombres de los días de la semana. Por default y por los nombres en ingles, el valor es [S, M, T, W, T, F, S]
• disableDays: Arreglo con los días de la semana que queremos que aparezcan deshabilitados. Ej. Sábados y Domingos ([0,6])
• firstDayOfWeek: Día de comienzo de la semana. El valor por default es cero y eso significa que el primer día de la semana será el domingo. En caso de querer establecer el lunes como el primer día de la semana, cambia el valor por 1.
• monthNames: Nombre de los meses. Por default los nombres de los meses están en inglés, sin embargo en esta parte los podemos poner en español.
• showToday: Variable booleana para establecer si deseamos señalar el día de hoy en el calendario. Por default el valor es true.

Para conocer todos los métodos, propiedades y eventos que conforman la clase DateField, ingresa a la siguiente página.

Tutorial

Para este tutorial usaremos el Flash 8. Abre el programa y crea un nuevo documento de Flash.
En el panel Components (Ctrl + F7), dentro de la sección User Interface, busca el componente DateField y arrástralo al área de trabajo. Selecciona el DateField que tienes en el área de trabajo y dentro del panel Properties asígnale el nombre de instancia de fecha. Dentro del mismo panel de Components -> User Interface selecciona un componente Button y arrástralo al área de trabajo. Ponle como nombre de instancia mostrar_btn y como label “Mostrar fecha”.

Renombra la capa donde se encuentran estos componentes (generalmente Layer 1) y ponle de nombre Componentes. Agrega una capa con el nombre de Acciones y dentro de esta capa pega el siguiente código:

mostrar_btn.onRelease = function()
{
	trace("Fecha Seleccionada: " + fecha.selectedDate);
}

Lo que hace el código anterior es mostrar en el panel Output el valor de la fecha seleccionada. Si el usuario no seleccionó alguna fecha, el mensaje mostrará el valor de undefined. Observa que de esta forma es fácil validar si el usuario seleccionó una fecha, de la siguiente forma:

if(fecha.selectedDate == undefined)
{
	trace("El usuario no seleccionó fecha");
}

Cuando el usuario selecciona una fecha, el valor de esa fecha seleccionada es mostrado dentro del rectángulo del DateField. Haz la prueba y verás que el campo de la fecha te despliega un valor similar al mostrado en la siguiente imagen:

Si haces click en el botón de Mostrar fecha, el valor obtenido por la propiedad selectedDate será: Wed Dec 3 00:00:00 GMT-0600 2008. Es posible que en estos momentos te preguntes de qué le sirve al usuario mostrarle la fecha en ese formato si lo más seguro es que tu usuario final hable español; o peor aún ¿de qué te sirve el formato regresado por la propiedad selectedDate si lo que quieres es guardar el valor en una columna de tipo Date de una base de datos?

Cambiar el formato de la fecha mostrada en el DateField

Para cambiar el formato de la fecha bastará con hacer uso de la propiedad dateFormatter. A esta propiedad hay que establecerle la función o método que se encargará de regresar la fecha en el formato especificado. Supongamos que queremos que la fecha se muestre como 03/12/2008, para eso tendríamos que añadir el siguiente código:

fecha.dateFormatter = function(fecha_sel:Date)
{
	var dia:String = fecha_sel.getDate() < 10 ? "0" +  fecha_sel.getDate() :  fecha_sel.getDate();
	var mes:String = (fecha_sel.getMonth() + 1) < 10 ? "0" +  (fecha_sel.getMonth() + 1) :  (fecha_sel.getMonth() + 1);
	return dia + "/" + mes + "/" + fecha_sel.getFullYear();
}

Esta función recibe cómo parámetro la fecha seleccionada por el usuario. De esa fecha podemos obtener el día usando la función getDate(); esta función nos regresa un valor de 1 a 31. Para obtener el número de mes de la fecha seleccionada usamos la función getMonth(); esta función nos regresa un valor de 0 a 11 donde el 0 equivale al mes de Enero y 11 al mes de Diciembre. La función getFullYear() nos regresará el valor del año seleccionado con el formato completo (es decir, de cuatro dígitos. Ej. 2005).
En nuestro ejemplo queremos que el mes y el día tengan dos dígitos, es por eso que en nuestro código verificamos si el número de día o mes es menor que 10, si es así le agregamos un cero al inicio.
Dentro de la función anterior podemos actualizar el valor de una variable global para guardar la fecha en el formato que deseemos de acuerdo a la base de datos que utilicemos o a nuestras necesidades. Por ejemplo, suponiendo que la fecha la tenemos que almacenar de la forma 2008-12-03, podremos considerar el siguiente código:

var fecha_seleccionada:String = “”;
fecha.dateFormatter = function(fecha_sel:Date)
{
	var dia:String = fecha_sel.getDate() < 10 ? "0" +  fecha_sel.getDate() :  fecha_sel.getDate();
	var mes:String = (fecha_sel.getMonth() + 1) < 10 ? "0" +  (fecha_sel.getMonth() + 1) :  (fecha_sel.getMonth() + 1);
	fecha_seleccionada = fecha_sel.getFullYear() + “-“ + mes + “-“ + dia;
	return dia + "/" + mes + "/" + fecha_sel.getFullYear();
}

Deshabilitar días de la semana en el componente DateField

Como lo dije al inicio del tutorial, la propiedad disabledDays nos permite especificar por medio de un arreglo qué días de la semana queremos que aparezcan deshabilitados. Supongamos que queremos realizar una aplicación estilo agenda para anotar nuestras juntas de trabajo. Para evitar equivocarnos, al momento de realizar la selección de fecha, y establecer una junta de trabajo un sábado o domingo, podemos deshabilitar estos días de la siguiente manera:

fecha.disabledDays = [0, 6];

Del código anterior, el número cero hace referencia al día domingo, mientras que el día seis hace referencia al día sábado.

Deshabilitar fechas o rango de fechas en el componente DateField

Para deshabilitar una fecha o bien un rango de fechas debemos usar la propiedad disabledRanges. Esta propiedad puede ser un arreglo de objetos cuyo tipo de dato es Date, o bien un objeto que contiene las propiedades rangeStart y rangeEnd y cuyos valores deben ser un objeto Date.

Continuando con el ejemplo anterior (el de la aplicación estilo agenda), imaginemos que vamos a salir de vacaciones del 20 al 28 de diciembre, y por lo tanto queremos deshabilitar esos días. El siguiente código nos permitirá hacerlo:

fecha.disabledRanges = [{rangeStart: new Date(2008, 11, 20), rangeEnd: new Date(2008, 11, 28)}];

Recuerda que el número de meses comienzan en 0, por lo tanto para el mes de diciembre el número es el 11.