Ajax DatePicker display inline

[Filippo Galbusera]

Hi everyone, I am a new member to the group.

First of all, nice to meet you! 

I have a question about the AjaxDatePicker component... 

Is the "inline display" functionality included in the current implementation? 

I would need to display the datepicker in a form applying the "inline display" mode, but to do so, according to jQuery documentation, I should have a "div" and not an "input" tag in the page markup. But at the moment the AjaxDatePicker component only requires an input in the html markup. 

Has anyone ever faced a similar problem? 

Thanks in advance 

Filippo

[Sebastien Briquet]

Hi Filippo,

First, welcome!

No, you cannot attach the jQuery UI DatePicker (or AjaxDatePicker)
*component* to a div because they inherits Wicket's DateTextField
which is a form component, so it has to be associated to a form
component (of type "text" or "date" to be precise).
If you want to have the inline datepicker, you can make your own
behavior (unfortunately I think you cannot reuse the existing
DatePickerBehavior, it is also designed to work with POST http
method).

The usage would be like:

this.add(new InlineDatePickerBehavior("#datepicker", new Options()) {

@Override
public void onSelect(AjaxRequestTarget target, String date)
{
DefaultDatePickerPage.this.onSelect(target, date);
}
});

Here is the code for the custom inline datepicker that will return the
date, as text.
Note that this class implementation is very typical of handling a
jQuery UI widget behavior with an ajax callback

abstract static class InlineDatePickerBehavior extends
JQueryUIBehavior implements IJQueryAjaxAware
{
private static final long serialVersionUID = 1L;
public static final String METHOD = "datepicker";

private JQueryAjaxBehavior onSelectAjaxBehavior;

/**
* Constructor
*
* @param selector the html selector (ie: "#myId")
* @param options the {@link Options}
*/
public InlineDatePickerBehavior(String selector, Options options)
{
super(selector, METHOD, options);
}

// Methods //

@Override
public void bind(Component component)
{
super.bind(component);

this.onSelectAjaxBehavior = new OnSelectAjaxBehavior(this);
component.add(this.onSelectAjaxBehavior);
}

// Events //

@Override
public void onConfigure(Component component)
{
this.setOption("onSelect",
this.onSelectAjaxBehavior.getCallbackFunction());

super.onConfigure(component);
}

@Override
public void onAjax(AjaxRequestTarget target, JQueryEvent event)
{
if (event instanceof SelectEvent)
{
this.onSelect(target, ((SelectEvent) event).getDateText());
}
}

protected abstract void onSelect(AjaxRequestTarget target, String date);

// Ajax classes //

/**
* Provides a {@link JQueryAjaxBehavior} that aims to be wired
to the 'onSelect' event
*/
protected static class OnSelectAjaxBehavior extends JQueryAjaxBehavior
{
private static final long serialVersionUID = 1L;

public OnSelectAjaxBehavior(final IJQueryAjaxAware source)
{
super(source);
}

@Override
protected CallbackParameter[] getCallbackParameters()
{
// function( dateText, inst ) { ... }
return new CallbackParameter[] {
CallbackParameter.explicit("dateText"),
CallbackParameter.context("inst") };
}

@Override
protected JQueryEvent newEvent()
{
return new SelectEvent();
}
}

// Event Object //

/**
* Provides an event object that will be broadcasted by the
{@link OnSelectAjaxBehavior} callback
*/
protected static class SelectEvent extends JQueryEvent
{
private final String date;

public SelectEvent()
{
this.date =
RequestCycleUtils.getQueryParameterValue("dateText").toString();
}

public String getDateText()
{
return this.date;
}
}
}


I added this example to the wiki (may be more readable):
https://github.com/sebfz1/wicket-jquery-ui/wiki/%5Bhowto%5D-Inline-jQuery-UI-DatePicker-Behavior