ADF: Disabling keyboard input on af:inputDate

Setting the ReadOnly property on an af:inputDate component to true does not only make the input field read-only but also hides the calendar icon.

If the use case is to force users to always select an input date from the popup calendar and to prevent keyboard input, as show in the image above, you can use a JavaScript based solution as shown below:

<af:resource>
  function disableEntry(evt){  
    evt.cancel(); 
  } 
 </af:resource>

…

<af:inputDate label="Label 1" id="id1" readOnly="false"
  contentStyle="background-color:lightgray;">
  <af:clientListener method="disableEntry" type="keyDown"/>
</af:inputDate>

The contentStyle attribute sets the af:inputDate field background color to light gray to indicate a read-only field.

Note: If the read-only setting is for all instances af:inputDate then, instead if using the contentStyle attribute, you use skinning af|inputDate::content{background-color:lightgray;}