Tuesday, June 19, 2012

JQWicket date picker

JQWicket is JQeury wrapper for Wicket. To get started import maven dependency:
   <dependency> 
       <groupId>com.google.code.jqwicket</groupId> 
       <artifactId>jqwicket</artifactId> 
       <version>0.8</version> 
   </dependency>
Java code:
In you application init method add these lines. They will include JQeury javascript libs to your pages.
import com.google.code.jqwicket.JQComponentOnBeforeRenderListener;
import com.google.code.jqwicket.JQContributionConfig;

super.getComponentPreOnBeforeRenderListeners().add(
    new JQComponentOnBeforeRenderListener(
        new JQContributionConfig().withDefaultJQueryUi()));

Then in your page:
import com.google.code.jqwicket.ui.datetimepicker.DateTimePickerTextField;


public class DatePickerPage extends WebPage {
    Logger log = LoggerFactory.getLogger(DatePickerPage.class);
    Date date = new Date();

    public DatePickerPage() {
        Form form = new Form("form"){
            @Override
            protected void onSubmit() {
                log.info("return value:"+date);
            }
        };
        form.add(new DateTimePickerTextField<Date>("datetimepicker", new PropertyModel<Date>(this, "date")));
        form.add(new SubmitLink("submit"));
        add(form);
    }
//Add getter and setter for a date
}
And your HTML should look something like this:
!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form wicket:id="form">
    Date: <input type="text" wicket:id="datetimepicker"/>
    <a wicket:id="submit">Go</a>
</form>
</body>
</html> 

Result:


But I still like more another date picker, because out of the box this one:
1. It looks over sized;
2. You need to convert its value from String to Date manually.

No comments:

Post a Comment