Aprendiendo Ext JS 3

Un calendario para capturar fechas Más videos

Descripción del tema

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.
datefiel imagendatefiel imagen

El componente DateField

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 imagen

La ventana que contendrá los campos de fechas

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();
datefield imagen

Un DateField básico

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.
datefield imagen

Un DateField restringido

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!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

13Comentarios

  • Avatar-2 Crysfel 25/06/2009

    Especial agradecimiento a Jose Armando (<a href="http://twitter.com/manduks" rel="nofollow">@manduks</a>) por su colaboración en este curso de Ext JS.

    • Avatar-8 Sergio 26/06/2009

      Hola si mal no recuerdo el Ext.form.DateField (hasta hace unos meses atras estaba con problemas), si colocas la fecha 13/10/xx, es decir, cualquier fecha que elijas del 13 de Octubre, da lo mismo el año, te agrega o quita un día, no marca el mismo 13 de Octubre. En el sitio de EXTJS, aun no han encontrado la solución eso creo. Yo por lo menos saco el calendario y preformateo el campo para la fecha.

      • Avatar-7 Nicolas Aranda 06/08/2009

        Sergio, sabes tengo el mismo problema con el mes de Octubre y no he podido dar con una solucion, tu como lo pudiste arreglar?

        • Avatar-1 Elías Manchón 12/09/2009

          Sabeis si hay algún autocompletar para "Ext JS" en eclipse?. Gracias

          • Avatar-2 Crysfel 14/09/2009

            checa este link a ver si te sirve http://www.spket.com/ saludos :D

            • Avatar-11 Elías Manchón 09/10/2009

              Si Crysfel, es una pasada, lo he integrado con eclipse, además incorpora un Ext theme builder, no es muy potente, pero por lo menos te permite cambiar el color de las css de forma visual.

              • Avatar-11 Francisco 12/07/2010

                Sabes alguna manera de cambiar el idioma de un datefield? es decir que en vez de que diga June diga Junio. hay manera de pasarle un Store para cambiar eso, o algo así?

                • Avatar-12 Geovanni Escalante 23/07/2010

                  Simplemente debes colocar Después de Esto no sólo colocará el calendario en español sino todos los demás componentes, los archivos de idioma estan en la carpeta locale que viene con el framework, si quieres puedes editarlo para colocar los mensajes que quieras

                  • Avatar-12 Junior 24/07/2010

                    Como podria colocar en algunos colores (ejemplo en ROJO) solo algunos dias (ejemplo 24/07/2010 , 26/07/2010, 27/07/2010) solo esos dias dejarlos en otro color y a la vez que aparescan bloqueados ¿?

                    • Avatar-2 ivan2car 06/12/2010

                      Hey! tengo una duda, no se como obtener el valor de mi campo... digamos que la idea sea guardarlo como se haria¿? es decir me creo otro boton y con javascritp como hago el value :(???

                      • Avatar-4 ivan2car 06/12/2010

                        por ejemplo con esto obtengo el primer alert(document.getElementById("ext-comp-1001").value); fecha de calendario... pero el caso es que yo no quiero que se llame ext-comp-1001 sino algo como Fecha1... es decir que mi identificador sea colocado al gusto ypues no se en que parte hacerlo :(

                        • Avatar-8 Benito GR 15/06/2011

                          como puedo hacer para que en un datefield se vea solo la fecha de 46 dias antes del dia de hoy?

                          • Avatar-11 ronald 01/10/2019

                            deseo sumar fechas

                            Instructor del curso

                            Crysfel3

                            Autor: Crysfel Villa

                            Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                            Descarga Código Fuente Ver Demostración

                            Regístrate a este curso

                            Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                            Tendrás acceso a descargar los videos, códigos y material adicional.

                            Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                            Llevarás un registro de tu avance.