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() {
$(“input[type=*][id*=id1]”).mask(“99/99/9999″);

};   </af:resource>

add the clientListener to call the above javascript as shown below

 

<af:inputDate value=”#{bindings.HireDate.inputValue}” clientComponent=”true”
label=”#{bindings.HireDate.hints.label}”
required=”#{bindings.HireDate.hints.mandatory}”
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”/>
</af:inputDate>

find the mask on Date component on focus as below

 

Hope this helps

datemask

Source Code ADFDynamicTabsPOC_datefix

 

0 Comments

Leave a Reply

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