Tapestry Components

DateInput

In my recent tutorial, "Apache Tapestry and Custom Components: DateInput", you will find the complete discussion of this topic, with all the explanations and the source code updated to Tapestry 4.

There is a standard Tapestry component named DatePicker. It allows users to enter dates using a sophisticated pop-up calendar window. This component can be quite useful in many web applications. But at the same time, in other applications it might be not acceptable - maybe just because of customers' preferences, as it happened in my recent Tapestry project. The customers just didn’t want to have a pop-up window for date input, they would prefer something more traditional.

DatePicker component has another downside also: it generates quite a bit of JavaScript code and relies on this code for its functioning. If a user will disable JavaScript in his or her browser, which is not completely unusual, this component will become useless.

The more traditional design of date input, preferred by my customers, was a set of three drop-down lists (<select> HTML elements) for day, month and year, which looks like this:

I decided that I could use this set of components in some other applications also. Besides, creating models for PropertySelection components in Tapestry can be quite cumbersome, so I'd prefer to do this just once. In other words, this is a perfect candidate to become a custom component. And such a component was created.

It is very simple, the selected date becomes available as java.util.Calendar, so you can easily extract from it any desired information.

The months are localized, the language in which their names are written depends on the preferred locale of the page, on which the component is used.

The years start at 1930 and end on the current year.

The component is quite forgiving. If you select an invalid date, say 30 February 2006, it will just convert it into the corresponding valid date, in this case 2 March 2006.

To use this component, put the DateInputLib.jar library into the WEB-INF/lib directory of your webapp and insert the following string into the .application file:

You can then use the component in your HTML template, perhaps like this:

Date: <span jwcid="date">,

or, if you want the template to be previewable, you can do it like this:

<p>Birth Date: 
<span jwcid="date">
  <select>
    <option>1</option>
    <option>2</option>
  </select>
  <select>
    <option>January</option>
    <option>February</option>
  </select>
  <select>
    <option>2005</option>
    <option>2006</option>
  </select>
</span>
</p>

And then you will have something like this in your page specification:

<property-specification name="date" type="java.util.Calendar"/> 

<component id="date" type="sundraw:DateInput">
  <binding name="date" expression="date"/> 
</component>

That's it.

Once again, here is the library: DateInputLib.jar

And here is the source code: DateInput.zip