How to hide / show yui.calendar.DatePicker in wicket

Question

I've run in to a problem I hope you guys can help me with.

I'm using a DateTextField with a DatePicker (from yui.calendar), they are both added to a WebMarkupContainer with OutputMarkupId and OutputMarkupPlaceholderTag set to true.

I want to be able to set the visibility of the container, but when I set it from true to false to true, the datepicker is no longer visible (I'm guessing it has to do with it not beeing mentioned in the HTML(?)) and I have to reload the entire page (and loose the input data) to get the DatePicker visible again. There is no problem with the DateTextField. Is there any good way to work around this?

JAVA:

invoiceDateFromField = new DateTextField("invoiceDateFromField", new PropertyModel(this, "invoiceDateFrom"), new PatternDateConverter("yyyy-MM-dd", true));
    invoiceDateFromField.setOutputMarkupPlaceholderTag(true);
    invoiceDateFromField.add(new DatePicker());
    containsAllContainer.add(invoiceDateFromField);

AjaxLink onClick:

containsAllContainer.setVisible(!containsAllContainer.isVisible());
target.add(containsAllContainer);//Edit

I tried to remove the DatePicker from invoiceDateFromField, and then add a new one when the container is set to visible, but this did not seem to work either.

Thanks!
Olle

Answer 1

YUI will lose its connection to the DOM element when you set it visible=false in Wicket (because the node is removed from the DOM). So when you add it back to the page, your instance of YUI calendar no longer has any associated field in the DOM. You need to be sure to update your reference with a new instance of calendar every time you re-render the DateTextField with Wicket