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

A blog on Oracle JDeveloper, ADF, MAF, MCS and other mobile and web topics inspired by questions and answers posted on the OTN forums.



Frank Nimphius

Search

Archives
« September 2015
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