Buy me a coffee :)

Wicket - jQuery UI

jQuery UI integration in Wicket 6.x, Wicket 7.x , Wicket 8.x & Wicket 9.x


Components / Samples


DatePicker is a form component, its value can be validated and submitted through a form.


package com.googlecode.wicket.jquery.ui.samples.jqueryui.datepicker;

import java.util.Date;

import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.Model;

import com.googlecode.wicket.jquery.ui.form.button.AjaxButton;
import com.googlecode.wicket.jquery.ui.form.button.Button;
import com.googlecode.wicket.jquery.ui.form.datepicker.DatePicker;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;

public class DefaultDatePickerPage extends AbstractDatePickerPage
	private static final long serialVersionUID = 1L;

	public DefaultDatePickerPage()
		final Form<Date> form = new Form<Date>("form", new Model<Date>());

		// FeedbackPanel //
		form.add(new JQueryFeedbackPanel("feedback"));

		// Date Picker //
		form.add(new DatePicker("datepicker", form.getModel()).setRequired(true));

		// Buttons //
		form.add(new Button("submit") {

			private static final long serialVersionUID = 1L;

			public void onSubmit()
			{, form);

		form.add(new AjaxButton("button") {

			private static final long serialVersionUID = 1L;

			protected void onSubmit(AjaxRequestTarget target)
			{, form);

			protected void onError(AjaxRequestTarget target)
				target.add(form); //refresh feedback panel

	private void info(Component component, Form<?> form)
	{ + " has been clicked");"The model object is: " + form.getModelObject());
<!DOCTYPE html>
<html xmlns:wicket="">
	<title>Wicket jQuery UI: date-picker</title>
	<div id="demo-panel">
		<form wicket:id="form">
			<input wicket:id="datepicker" type="text" /><br/>
			<input wicket:id="submit" type="submit" value="Submit" />
			<button wicket:id="button">Ajax Button</button>
			<div wicket:id="feedback" style="width: 360px;"></div>