El día de hoy vamos a hablar del componente DateField. Este componente provee un “input” de tipo fecha con formato de un calendario muy bien estilizado. DateField en Ext JS es un componente muy completo ya que brinda muchas opciones de configuración. En este tutorial discutiremos las configuraciones más importantes.

Material de apoyo

Para poder continuar necesitamos descargar el material de apoyo. Recuerde que este tutorial pertenece al capitulo de formularios, y al final del capitulo agregaremos nuestro DateField al formulario final, pero para evitar algunas confusiones haremos este tutorial en un archivo diferente. Puedes ver el demo de lo que haremos en este tutorial, a continuación se muestran imagenes del componente que veremos el día de hoy.

Empaquetando el tutorial.

Procedemos a empaquetar nuestro código.

Ext.ns('com.quizzpot.tutorial');

Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';

com.quizzpot.tutorial.DateFieldTutorial = {
	init: function(){
		//aqui va el codigo del tutorial	
        }
}
Ext.onReady(com.quizzpot.tutorial.DateFieldTutorial.init,com.quizzpot.tutorial.DateFieldTutorial); 

A estas alturas ya todos sabes lo que el código anterior está haciendo, de no ser así te recomiendo leer el tutorial donde se explica más detalladamente.

Ventana

A continuación vamos a crear una ventana que alojará los diferentes tipos de configuraciones para el componente DateField que haremos, además nos servirá para visualizar los DateField que crearemos en este tutorial.

var win=new Ext.Window({
	title: 'DateField demo',
	bodyStyle:'padding: 10px',//alejamos los componentes de los bordes
	width:400,
	height:360,			
	layout:'form'		//tipo de organizacion de los componentes
});
win.show();

Ya hemos explicado las propiedades de configuración en el tema de ventanas y paneles, si tienes dudas con el código anterior puedes repasar el tema, con respecto a la configuración “layout” hablaremos más adelante en un tema especial, por lo pronto solo ten en mente que asignándole “form” los campos se acomodarán en la ventana como en un formulario.

DateField Simple

Una vez creada nuestra ventana, vamos a crear nuestro primer componente tipo DateField.

 var dateField = new Ext.form.DateField({
	fieldLabel: 'Date',
	emptyText:'Insert a date...',
	format:'Y-m-d',
	width: 150
});

Ahora voy a dar una descripción de las propiedades utilizadas en el código anterior: format: con esta propiedad definimos el formato de la fecha que se mostrará en nuestro campo. El formato 'Y-m-d', define un formato del tipo “año-mes-día”. Para ver más formatos debemos consultar el API del objeto Date en Javascript. fieldLabel: es la propiedad común en todos los componentes, esta propiedad define el texto que acompañará al campo y mediante esta propiedad le mostramos al usuario el tipo de información que necesita introducir en el campo, por lo tanto procura poner algún texto descriptivo. emptyText: esta propiedad la hemos visto anteriormente, al usarla hacemos que el campo despliegue un texto cuando está vacío, es conveniente utilizarla para desplegar ayuda extra al usuario. Ahora agregamos el componente a nuestra ventana:

var win=new Ext.Window({
	bodyStyle:'padding: 10px',
	width:400,
	height:360,
	items: dateField, //<-- le asignamos el datefield
	layout:'form'
});
win.show();

Un DateField Restringido

¿Qué pasa si queremos que nuestras fechas se muestren restringidas? Por ejemplo si queremos que sólo se puedan seleccionar días a partir de hoy. Para este tipo de configuración existen algunas propiedades que veremos en nuestro siguiente DateField.

var dateFieldR=new Ext.form.DateField({
	fieldLabel: 'Date from today',
	emptyText:'Insert a date...',
	format:'Y-m-d',
	minValue: new Date(), //<-- min date is today
	maxValue:'2009-08-28', // <-- max date
	value:new Date() // <-- a default value
});

Descripción de propiedades: minValue: es el valor mínimo elegible en nuestro componente DateField. maxValue: es el valor máximo elegible en nuestro componente DateField. value: el valor con que se inicializa el campo, por defecto es “undefined”. Puedes ver que en este ejemplo, en la propiedad “maxValue” le he puesto directamente una fecha, esto es únicamente para demostrar que también podemos asignarle una fecha en String y el componente se encargará de hacer las debidas conversiones de datos.

Conclusiones

El componente DateField es un componente bastante completo y nos brinda opciones de configuración en su mayoría iguales a las del componente TextField con algunas variaciones propias del componente, esto es porque DateField hereda de TextField. Este fue tutorial corto pero al ver las diferentes configuraciones podemos comprender mejor el funcionamiento del componente DateField. En el siguiente tutorial discutiremos dos componentes muy bondadosos que son las áreas de texto y los editores HTML. Como siempre los comentarios y sugerencias son bienvenidos, además recuerda seguirnos en Twitter para estar al tanto de las actualizaciones, si tienes dudas sobre este u otros temas del curso puedes registrarte en el foro y te podremos ayudar entre toda la comunidad.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!