rich:calendar with yyyy-MM gets cleared upon icon click

[ariefz]

Hi All,

We were trying to customize the rich:calendar component to suits our "legacy" component that supports month-selection calendar. Based on this workaround [http://relation.to/Bloggers/RichFacesCalendarForMonthsSelection], we encountered some issue.

First, our page is having these tags to display the calendar:

{code:xml}

<rich:calendar value="#{mthCal.selectedDate}" mode="client"

                                  datePattern="yyyy-MM"

                                  showWeekDaysBar="false"

                                  showWeeksBar="false"

                                  showFooter="false"

                                  popup="true"

                                  oncurrentdateselected="event.rich.component.selectDate(event.rich.date)"

                                  styleClass="mth-cal" />

              <a4j:commandButton reRender="out1" value="Verify Date"></a4j:commandButton>

              <h:outputText value="#{mthCal.selectedDate}" id="out1" />

{code}

Upon icon-click, the input text will be cleared automagically and we're kinda unsure if our approach really supported at the first place. The intention is still using popup mode and when the popup shows up, the user could only see month selection since we have hide the remaining days-grid using the css trick.

Anyone has any idea about this issue.

Please advice.

Thanks

p/s: We're using RF-3.3.3, JSF1.2 (Mojarra), IE8

[nbelaevski]

Hi,

Calendar component validates input content and the validation is too strict for your case - date is undefined, so the whole selection is cleared. As a workaround, you can use pattern yyyy-MM-d, hide input via CSS and place text updated via JS by selection event instead of it.

[ariefz]

Thanks Nick.

I think we have thought that option before while working with some of the existing formatting text (masked-input) issue. We tried one of the jQuery plugin (i.e. http://digitalbush.com/projects/masked-input-plugin/). The following is our sample code on the javascript side:

{code}
<script type="text/javascript" src="js/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
  jQuery(function($){
    $(".txt-mth-cal").mask("9999-99");
  });
</script>
{code}

I believe the way this plugin works is by changing the physical value inside the textbox with the formatted value (based on the pattern). So when we click on the icon, richfaces javascript will receive the already formatted value hence the problem still occured.

I do not have any other idea on the "hide input via CSS". Do you have any suggestion on that?

Many thanks.

[nbelaevski]

I meant that you can set calendar's pattern to yyyy-MM-d and hide its main input so that user won't see date number. Then you can provide your own input programmed via JS. It's easy to implement if you need read only input, but if not, I recommend to use another way - e.g. fix the problem in calendar code and rebuild it or use another component for months selection - e.g. a4j:repeat with links.