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;}

Comments:

Post a Comment:
Comments are closed for this entry.
About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today