Hi.
I want to hide rich calendar on the page.

So I created a CSS

.invisibleInputField {
 display:none;
}

Now I apply this to my calendar

<rich:calendar id="signDate" popup="true" value="#{agreementForm.newAgreement.signDate}" ondateselect="return checkDateRich(event.rich.date.toString());" styleClass="invisibleInputField"/>

But I still see the input box and the button. The only thing that hides is the calendar that should show when I press the button. Isn't this strange?

Here is why that happens....
The domponent on HTML level looks like.

<span id="agreementFormTemplateDRVFT:signDatePopup">
<input id="agreementFormTemplateDRVFT:signDateInputDate" class="rich-calendar-input" type="text" readonly="readonly" style="vertical-align: middle;" name="agreementFormTemplateDRVFT:signDateInputDate"/>
<img id="agreementFormTemplateDRVFT:signDatePopupButton" class="rich-calendar-button" src="/mae2/a4j_3_2_0.SR1-SNAPSHOTorg.richfaces.renderkit.html.iconimages.CalendarIcon/DATB/eAE7fv4Kw6znAA4mA-w_.jsf" style="vertical-align: middle;"/>
<input id="agreementFormTemplateDRVFT:signDateInputCurrentDate" type="hidden" value="08/2008" style="display: none;" name="agreementFormTemplateDRVFT:signDateInputCurrentDate"/>
</span>
<div id="agreementFormTemplateDRVFT:signDateIFrame" style="display: none;"/>
<table id="agreementFormTemplateDRVFT:signDate" class="rich-calendar-exterior rich-calendar-popup invisibleInputField" cellspacing="0" cellpadding="0" border="0" style="position: absolute; z-index: 3; left: 64px; top: 205px;">
</table>
<div id="agreementFormTemplateDRVFT:signDateScript" style="display: none;">

As can be seen class "invisibleInputField" is applied only to the table.

I can work around by creating a DIV around the component. But that should be by deafult, I think.

Cheers