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 Newbie

      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?

        • 1. Re: Calendar control linked to drop downs for date selection
          Nick Belaevski Master

          Hello,

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

          • 2. Re: Calendar control linked to drop downs for date selection
            David Spark Newbie

            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?

            • 3. Re: Calendar control linked to drop downs for date selection
              Nick Belaevski Master

              In what browser does that reproduce?

              • 4. Re: Calendar control linked to drop downs for date selection
                David Spark Newbie

                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.

                • 5. Re: Calendar control linked to drop downs for date selection
                  David Spark Newbie

                  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!