5 Replies Latest reply on Mar 6, 2009 7:51 AM by david.spark

    Calendar control linked to drop downs for date selection

    david.spark Mar 5, 2009 6:52 AM

      Hi
      I am trying to implement a date selection whereby there is a rich:calendar control combined with a drop down h:selectOneMenu for day and month so the user can use either method to select the date. A good example of what I'm trying to achieve is on this site: http://www.nationalrail.co.uk/

      So far it's not working, I can get the calendar control to change when the drop downs are used but when I try to use the calendar it just reset to it's previous value (presumably because it's getting this from the drop downs).

      My code is thus:

       <a:region renderRegionOnly="true">
 <h:panelGroup id="eventDates">
 <h:selectOneMenu value="#{bookingManager.dateDay}">
 <f:selectItem itemValue="1" itemLabel="1"/>
 <f:selectItem itemValue="2" itemLabel="2"/>
 ...
 <f:selectItem itemValue="30" itemLabel="30"/>
 <f:selectItem itemValue="31" itemLabel="31"/>
 <f:convertNumber/>
 <a:support event="onchange" ajaxSingle="true" reRender="eventDates"/>
 </h:selectOneMenu>
 <h:selectOneMenu value="#{bookingManager.dateMonth}">
 <f:selectItem itemValue="0" itemLabel="Jan"/>
 ...
 <f:selectItem itemValue="11" itemLabel="Dec"/>
 <f:convertNumber/>
 <a:support event="onchange" ajaxSingle="true" reRender="eventDates"/>
 </h:selectOneMenu>
 <rich:calendar id="eventDate"
 value="#{currentEvent._Start}"
 required="true"
 datePattern="MMM d, yyyy"
 inputClass="textboxarea"
 showWeeksBar="false"
 showFooter="false">
 <a:support event="ondateselected" ajaxSingle="true" reRender="eventDates"/>
 </rich:calendar>
 <h:message for="eventDate"/>
 </h:panelGroup>
 </a:region>


      #{bookingManager.dateDay} and #{bookingManager.dateMonth} are basically getters/setters that directly affect the value of the calender backing bean #{currentEvent._Start}.

      Can anybody suggest a way to make this code work or any other solution to the problem?

      • 1623 Views
      • Tags:
        • 1. Re: Calendar control linked to drop downs for date selection
          nbelaevski
          nbelaevski Mar 5, 2009 9:24 PM (in response to david.spark)

          Hello,

          You can try to add "action" to a4j:support that will modify selected date.

            • Actions
          • 2. Re: Calendar control linked to drop downs for date selection
            david.spark Mar 6, 2009 6:34 AM (in response to david.spark)

            Hi, thanks for the suggestion. It's now working (with one quirk mentioned below) with the following code:

             <a:region renderRegionOnly="true">
 <h:panelGroup id="eventDates">
 <h:selectOneMenu value="#{bookingManager.dateDay}" id="eventDay">
 <f:selectItem itemValue="1" itemLabel="1"/>
 ...
 <f:selectItem itemValue="31" itemLabel="31"/>
 <f:convertNumber/>
 <a:support event="onchange" ajaxSingle="true" reRender="eventDates"/>
 </h:selectOneMenu>
 <h:selectOneMenu value="#{bookingManager.dateMonth}" id="eventMonth">
 <f:selectItem itemValue="0" itemLabel="Jan"/>
 ...
 <f:selectItem itemValue="11" itemLabel="Dec"/>
 <f:convertNumber/>
 <a:support event="onchange" ajaxSingle="true" reRender="eventDates"/>
 </h:selectOneMenu>
 <rich:calendar id="eventDate"
 value="#{currentEvent._Start}"
 required="true"
 datePattern="MMM d, yyyy"
 inputClass="textboxarea"
 showWeeksBar="false"
 showFooter="false">
 <a:support event="ondateselected" ajaxSingle="true" reRender="eventDates">
 <a:actionparam value="$('bookingForm:eventDate').component.getSelectedDateString('MM/dd/yy')"
 assignTo="#{bookingManager.updateDate}"
 noEscape="true"/>
 </a:support>
 <f:facet name="header">
 <h:panelGrid columns="3" width="100%" columnClasses="rich-calendar-tool">
 <h:outputText value="{previousMonthControl}" style="font-weight:bold;"/>
 <h:outputText value="{currentMonthControl}" style="font-weight:bold;"/>
 <h:outputText value="{nextMonthControl}" style="font-weight:bold;"/>
 </h:panelGrid>
 </f:facet>
 </rich:calendar>
 <h:message for="eventDate"/>
 </h:panelGroup>
 </a:region>

            The only slight problem is that the very first time the page is loaded when I click on the calendar icon the popup calender appears and then closes straight away. Subsequent clicks are fine and it opens and stays open. Obviously this is a bit annoying for end users so I was wondering if there's anything obvious that I'm doing wrong?

              • Actions
            • 3. Re: Calendar control linked to drop downs for date selection
              nbelaevski
              nbelaevski Mar 6, 2009 7:20 AM (in response to david.spark)

              In what browser does that reproduce?

                • Actions
              • 4. Re: Calendar control linked to drop downs for date selection
                david.spark Mar 6, 2009 7:38 AM (in response to david.spark)

                It happens in both IE7 and Firefox 3. It doesn't happen if I surround the rich:calendar with:

                <a:region renderRegionOnly="true">
...
</a:region>

                but that doesn't work as a solution because then the re-rendering of the drop downs doesn't happen as they are outside the region.

                  • Actions
                • 5. Re: Calendar control linked to drop downs for date selection
                  david.spark Mar 6, 2009 7:51 AM (in response to david.spark)

                  OK, I seem to have solved it by changing the a:support event from ondateselected to oncollapse

                  Hopefully that is it all working now :-)

                  Thanks for you help!

                    • Actions