I have a drop down (h:selectOneMenu) in my page which acts as a easy picker containing most commonly used date range eg, next hour, today etc.

I have a rich:calendar object to display date.

On change of the easy picker i need the date should be automatically populated in the rich:calendar object. I'm using valueChangeListener of the h:selectOneMenu to call a method in the managed bean to set the appropriate date in the rich:calendar object.

The rich:calendar is rendered when the h:selectOneMenu is changed for the first time but if we change it for the second time then the rich:calendar is not at all rendered.

<a4j:region renderRegionOnly="true">
 <h:panelGrid columns="2" >
 <h:outputText value="Date range:" />
 <h:selectOneMenu id="dateRange" valueChangeListener="#{searchBean.processDateRangeSelection}" value="#{searchBean.selDateRange}">
 <a4j:support event="onchange" reRender="fromDate" ajaxSingle="true"/>
 <f:selectItem itemValue=""/>
 <f:selectItem itemValue="Next Hour"/>
 <f:selectItem itemValue="Last Hour"/>
 <f:selectItem itemValue="Today"/>
 <f:selectItem itemValue="Yesterday"/>
 <f:selectItem itemValue="Tomorrow"/>
 <f:selectItem itemValue="Next week"/>
 <f:selectItem itemValue="Last week"/>
 </h:selectOneMenu>
 <h:outputText value="From date:" />
 <rich:calendar id="fromDate" mode="ajax" datePattern="MMM dd yyyy, HH:mm a" direction="top-right" value="#{searchBean.fromDate}"/>
 </h:panelGrid>
</a4j:region>