How to setup a masked input for rich:calendar in RichFaces

In richfaces you can use jquery to set up masked inputs. First, you must download masked input plugin for the jQuery javascript library and reference it in some part of the page:

<h:outputScript name="js/jquery.maskedinput-1.3.min.js" target="head" />

Then, to mask some input field you should do:


<h:inputText id="date" value="#{bBean.date}" >
    <rich:jQuery selector="#date" query="mask('99/99/9999',{placeholder:'_'})" />
</h:inputText>

Unfortunely, the same doesn't work for rich:calendar. Richfaces automatically renders rich:calendar into an input field for the date text and a div for the calendar itself. The input field is generated with the id of the rich:calendar tag plus "inputDate" as a prefix: ie, if the calendar has id="dob", the generated input field will have the id="dobInputDate"; so one workaround could be:

<h:form id="someForm">
    ...

    <rich:calendar id="date" value="#{bBean.date}"
        enableManualInput="true" popup="true" showApplyButton="false" >
    </rich:calendar>
    <rich:jQuery selector="#someForm\:dateInputDate" query="mask('99/99/9999',{placeholder:'_'})" />
    ...
</h:form>

The attribute enableManualInput of the calendar should be set to true, otherwise it doesn't make sense to mask the input field.