ADF Mask on DateComponent

By | August 12, 2013 | 0 Comment


this blogs describe use case of showing mask(__/__/____) on the ADF date component .

To add the Mask on ADF date component,i have found jquery java script to achieve this.

we need to use the below Jquery javascript files in JSPX/Jsff page.

use the below code snippet to achieve the above requirement

<af:resource type=”javascript” source=”scripts/dateFormat.js”/><!– this javascript can be downloaded from the jqury site also avaiable in the source code of this project for source see link in bottom–>
<af:resource type=”javascript” source=”scripts/mask.js”/>
<af:resource type=”javascript”>
function ondateFocus() {

};   </af:resource>

add the clientListener to call the above javascript as shown below


<af:inputDate value=”#{bindings.HireDate.inputValue}” clientComponent=”true”
shortDesc=”#{bindings.HireDate.hints.tooltip}” id=”id1″>
<af:clientListener type=”focus” method=”ondateFocus”/>
<f:validator binding=”#{bindings.HireDate.validator}”/>
<af:convertDateTime pattern=”dd/MM/yyyy” secondaryPattern=”dd/MM/yyyy”/>

find the mask on Date component on focus as below


Hope this helps


Source Code ADFDynamicTabsPOC_datefix



Leave a Reply

Your email address will not be published. Required fields are marked *