Learning Ext JS 3

A calendar to capture dates Más videos

Descripción del tema

Today we will talk about the DateField component. This component provides an "input" type formatted date from a calendar very well stylized. DateField in Ext JS is a very complete component since it offers many configuration options. In this tutorial we will discuss the most important settings.

Resources

Before you start this tutorial you need to download the resources. Just remember that this tutorial belongs to the chapter of Forms and at end of the chapter we will add the DateField to our final form, but to avoid confusions, let's do this tutorial in a separate file. You can see the demo of what we'll do in this tutorial, the following images show the component we will see today.
datefields imagedatefields image

The component DateField

Packaging the tutorial.

Let's package our code before we start.
Ext.ns('com.quizzpot.tutorial');

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

com.quizzpot.tutorial.DateFieldTutorial = {
	init: function(){
		//the code goes here
        }
}
Ext.onReady(com.quizzpot.tutorial.DateFieldTutorial.init,com.quizzpot.tutorial.DateFieldTutorial); 
By now you all must know what the previous code is doing, otherwise I recommend you read the tutorial that has a better explanation.

Window

Right now we're going to create a window that will contain different types of settings for the DateField component we will create, this window will help us to visualize the DateFields we will use in this tutorial.
var win=new Ext.Window({
	title: 'DateField demo',
	bodyStyle:'padding: 10px',//adding padding to the components
	width:400,
	height:360,			
	layout:'form'		//organization of the components
});
win.show();
We have explained the configuration properties in the chapter of windows and panels, if you have doubts regarding the previous code you can review the chapter. About the configuration "layout", I won't explain in details about it since we'll discuss about it later on, for now just keep in mind that assigning the value "form", the fields will be organized in the window just like form.
datefield image

The window that will contain the date fields

Simple DateField

Once created our window, we will create our first DateField component.
 var dateField = new Ext.form.DateField({
	fieldLabel: 'Date',
	emptyText:'Insert a date...',
	format:'Y-m-d',
	width: 150
});
In the previous code we use three properties, let's see a description of them: format: this property defines the date format to display in our field. The format 'Y-m-d', defines a format like "year-month-day". If you want to see more formats you can check the API of the Date object. fieldLabel: this is the common property for all components, this property sets the text that will appear next to the component; through this property we'll show the user to type of information he/she needs to enter in the field, so make sure you write a descriptive text. emptyText: we have seen this property previously, it's the default text to place into an empty field, it is very useful to display a hint to the user. Let's add the component to our window:
var win=new Ext.Window({
	bodyStyle:'padding: 10px',
	width:400,
	height:360,
	items: dateField, //<-- assigning the datefield
	layout:'form'
});
win.show();
datefield image

A basic DateField

A restricted DateField

What happens if we want to show that our dates are restricted? For example if we want the user to select days from today. For this type of configuration there are some properties we need to add to our 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:'2010-08-28', // <-- max date
	value:new Date() // <-- a default value
});
Description of the properties: minValue: is the the minimum value allowed in our component DateField. maxValue: is the the maximum value allowed in our component DateField. value: the value to initialize the field with (defaults to undefined). As you can see in this example, in the property "maxValue" I've put a date directly, I did it only to show that we can also assign a date using a String and the component will make the necessary data conversions.
datefield image

A restricted DateField

Conclusions

The DateField component is a fairly complete component and the configuration options it gives us are mostly the same as the TextField component with variations specific to the component, this is because DateField inherits from TextField. This tutorial was short but to see the different configurations we can have a better understanding of the functionality of the DateField component. In the next tutorial we will discuss two nice components: the textareas and HTML editors. As always, your comments and suggestions are very welcome, just remember to follow us on Twitter (@quizzpot) to be updated.

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

Este tutorial pertenece al curso Learning 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?

5Comentarios

  • Avatar-10 Michael 21/10/2009

    You got my attention with that calendar showing years and months but I don't see any details in your tutorial...

    • Avatar-6 Crysfel 21/10/2009

      Hi Michael, in order to show the months and years, just click on the month's title and you will see the years and months. You don't need to do anything else to get that functionality. ;) Best regards

      • Avatar-12 Michael 22/10/2009

        Ah yes, that's right. I was hoping the calendar could open like that - show just years and months. That's a common report filter in my business.

        • Avatar-8 Abhijit 30/06/2010

          Hello Crysfel, When I try displayng it in my html form, the calendar dropdown shows only till "Thursday". I can't select days under friday and saturday. Please help. Thanks

          • Avatar-11 shankar 01/12/2010

            how to change the minValue and maxValue of the new Ext.form.DateField dynamically?, please reply with example

            Instructor del curso

            Crysfel3

            Autor: Crysfel Villa

            Software engineer with more than 7 years of experience in web development.

            Descarga Código Fuente Ver Demostración

            Regístrate a este curso

            Este tutorial pertenece al curso Learning 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.