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.

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.

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

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.

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!