Wicket jQuery UI: plugin / RangeDatePickerTextField

RangeDatePickerTextField

Components / Samples

Description

RangeDatePickerTextField is a FormComponent based on a TextField and a RangeDatePicker;
The model object of this component is a DateRange.

The TextField's date format and separator can be customized by overriding #newDateFormat() and #getSeparator().

Note

To keep time information (from 0:00:00 to 23:59:59) on form submit, #newDateFormat() should be overridden as follow:

new RangeDatePickerTextField("datepicker", model) {

	@Override
	protected DateFormat newDateFormat(Locale locale)
	{
		DateFormat df = new SimpleDateFormat("dd MMM yyyy HH:mm:ss");
		df.setTimeZone(DateRange.UTC);

		return df;
	}
};

Since

wicket-jquery-ui-plugin-1.3.0
wicket-jquery-ui-plugin-6.1.0

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

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.time.Duration;

import com.googlecode.wicket.jquery.core.resource.StyleSheetPackageHeaderItem;
import com.googlecode.wicket.jquery.core.utils.DateUtils;
import com.googlecode.wicket.jquery.ui.form.button.Button;
import com.googlecode.wicket.jquery.ui.panel.JQueryFeedbackPanel;
import com.googlecode.wicket.jquery.ui.plugins.datepicker.DateRange;
import com.googlecode.wicket.jquery.ui.plugins.datepicker.RangeDatePickerTextField;

public class RangeDatePickerTextFieldPage extends AbstractRangeDatePickerPage
{
	private static final long serialVersionUID = 1L;

	public RangeDatePickerTextFieldPage()
	{
		// Form //
		Form<Void> form = new Form<Void>("form");
		this.add(form);

		// FeedbackPanel //
		final FeedbackPanel feedback = new JQueryFeedbackPanel("feedback");
		form.add(feedback.setOutputMarkupId(true));

		// RangeDatePicker //
		long threeDays = Duration.ONE_DAY.getMilliseconds() * 3;
		long threeDaysAgo = new Date().getTime() - threeDays;
		final IModel<DateRange> model = Model.of(DateRange.of(new Date(threeDaysAgo), new Date()));

		final RangeDatePickerTextField datepicker = new RangeDatePickerTextField("datepicker", model);
		form.add(datepicker);

		// Button //
		form.add(new Button("button") {

			private static final long serialVersionUID = 1L;

			@Override
			public void onSubmit()
			{
				DateRange range = datepicker.getModelObject();

				if (range != null)
				{
					DateFormat df = new SimpleDateFormat("dd MMM yyyy HH:mm:ss Z");
					df.setTimeZone(DateUtils.UTC); // important

					this.info(String.format("%s - %s", df.format(range.getStart()), df.format(range.getEnd())));
				}
				else
				{
					warn("No date supplied");
				}
			}
		});
	}

	// Methods //

	@Override
	public void renderHead(IHeaderResponse response)
	{
		super.renderHead(response);

		response.render(new StyleSheetPackageHeaderItem(RangeDatePickerTextFieldPage.class));
	}
}

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket jQuery UI: plugin / RangeDatePickerTextField</title>
</wicket:head>
</head>
<body>
<wicket:extend>
	<form wicket:id="form">
		<div wicket:id="datepicker"></div>
		<br/>
		<button wicket:id="button" type="submit">Submit</button>
		<br/><br/>
		<div wicket:id="feedback" style="width: 480px;"></div>
	</form>
</wicket:extend>
</body>
</html>

.rangedatepicker-input {
	width: 240px;
}