www.bhaskarvk.info

If you have been using a component based framework like JSF or wicket for your web development, One thing you realize very quickly, is that there are 2 things to know about component based development.

• Learning the framework. This involves learing the API, how validators, converters work, the life-cycle of a page etc. Most of the code you write at this point of time, will be crude and hackish in nature.
• The second phase of learning, is finding the pre-build components to use. Of course you can write your own converters and validators, but chances are someone has already done all that hard work and all you need to do is find it. Here is where you get down to business, and write code, that is inline with the whole component based development approach.

Here I am going to show you how you can use 2 different components from the Wicket Extensions project to create a Date/Time picker.

We will let these components validate themselves, and manage the conversion to and from strings, on their own. All we need to do is specify the exact display format of our Date/Time.

First we will use the DateTextField component. The DateTextField Component is merely an extension of the more generic TextField component, with 2 advantages, it has a built-in converter to convert between the view and model and secondly it can validate the input to a predefined date format.

Having a text filed, that validates and converts date entries, is fine, but it is really cumbersome for a user, to have to type in the Date/Time values that conform to a specific format. This is where the DatePicker component comes in. The Datepicker is a nice little wrapper around the excellent javascript based JSCalendar, which gives you ability to use a calendar to pick out your dates.

Following is code fragment for using the two together.

import java.text.SimpleDateFormat;
import wicket.extensions.markup.html.datepicker.DatePicker;
import wicket.extensions.markup.html.form.DateTextField;
import wicket.util.convert.converters.DateConverter;
 
 
DateConverter conv = new DateConverter();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm a");
conv.setDateFormat(Locale.getDefault(), sdf);
 
TextField startDate = new DateTextField("startDate",sdf.toPattern());
startDate.setRequired(true);
 
DatePicker sDatePicker = new DatePicker("sDatePicker", startDate);
sDatePicker.setDateConverter(conv);

By default both the DatePicker and DateTextField use the current locale's default date format for display/conversion. For my case I wanted a yyyy-MM-dd hh:mm a format.
So first I define a DateConverter that adheres to this format. Next I create a DateTextField and specify the required format as the 2nd argument for the DateTextField constructor. This configures the DateTextField's converter and validator to use the required format.
Next I create a DatePicker, the DatePicker constructor, needs to know the wicket id of the view and the TextField component to tie to (in my case the startDate component). Next we call the setDateConverter on the DatePicker so that when a user selects a date, the corresponding text field is automatically populated with the set format.

The DatePicker component is very smart ,and can be used to select either just Date, or both Date and Time, depending on its DateConvertor's format.

To finish off, here's the corresponding HTML for the 2 components.

Start Date : <input type="text" wicket:id="startDate" size="20" />
<span wicket:id="sDatePicker" />