JAVASCRIPT

Using the EXT JS Date Picker Widget

In a recent article I looked at the EXT JS JavaScript library and gave a brief overview of what it does and what it contains. In this article we’re going to look at implementing one of the many widgets that come with the library – the date picker widget.

Author Info:

By: Dan Wellman

Poor Best

Rating:

/ 17

July 14, 2008

TABLE OF CONTENTS:

You’ll need a copy of the library of course; to get it you can go to the EXT JS site at http://extjs.com and visit the downloads page. Once downloaded, create a directory in which to store the library and the example page that we’ll be creating; c:extjs-site should suffice. Next create another new directory within this called ext and unpack the library to this folder. Now that the library is installed we can begin coding. In a new file in your text editor, create the following basic page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>EXT JS Datepicker Example</title>

</head>

<body>

<label>Enter a date: </label><input type="text" id="dateField"><button id="openCalendar">Open Calendar</button><div id="calendar"></div>

</body>

</html>

Aside from the standard page furniture common to any basic web page (doctype declaration, content type declaration, etc), we have three files from the library. The first is the CSS file responsible for styling the widgets in EXT JS; next is the base file for the library (ext-base.js) which sets up the namespacing, the internal cache and provides other core services; finally, there is a file that encompasses all of utilities and widgets within the library. Using this file means that we don’t need to worry about which other components the DatePicker class needs in order to function correctly.

The body of the page contains a simple text box, which is where the date that is chosen using the date picker will be placed; a button that will be used to open the date picker (we could use the button widget from the library, but we’ll stick with the standard HTML equivalent for this example); and an empty container element for the date picker to be rendered into.

Next: Invoking the Date Picker >>