Using the EXT JS Date Picker Widget

It takes very little code to create a basic implementation of the date picker. Directly after the first two <script> tags, add the following code:

<script type="text/javascript">

//set local blank image

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

//define function to be executed when page loaded

Ext.onReady(function() {

//create the date picker

var myDP = new Ext.DatePicker();

//render the date picker

myDP.render('calendar');

});

</script>

The library uses a blank gif image for various things. If we don’t map the BLANK_IMAGE_URL constant to a local resource, the file will be downloaded from EXT, so for performance, it’s best to start every EXT JS script by setting this locally. Next we use the onReady method of the library to specify an anonymous function to be executed when the page has loaded. Using this means that we don’t interact with the DOM until it is in a usable state. Like the blank image property, this is something that you’ll probably use in every EXT JS implementation.

Next we define the myDP variable, which is used to hold the date picker object. This object is created using the DatePicker method of the library. Once the date picker object has been created, calling the render method adds the date picker to our empty container element and displays it on the page.

If you run the page in your browser at this point, the date picker will be visible on the page as soon as it loads. You can browse different months and see the elements that are available, like the today button, which automatically selects the current date, for example.

The DatePicker constructor method also accepts a configuration object, which can be specified inline or passed to the method at instantiation time. There are a range of different configuration properties available (the API browser on the EXT JS documentation page lists them all) and one of them allows us to change the day in the first column of the date picker (Sunday is shown first by default). Change the onReady function so that it appears as follows (new code is shown in bold):

//define function to be executed when page loaded

Ext.onReady(function() {

//create the date picker

var myDP = new Ext.DatePicker(

{ startDay: 1 }

};

The day columns are represented using a zero-based index. To make the widget start on Monday we just supply the index for Monday as the value of the startDay property. There are many other properties that can be used to alter the default implementation of the date picker widget. Any configuration properties like this are passed to the date picker constructor method as a literal object.