Requirement: I have an af:inputDate field in which by default the keyboard input, and the Date selection both are allowed. Now, as per the requirement, I want to disable the keyboard input and only allow the user to select the Date from the Date component.
Solution: For solution of the above requirement follow the steps as shown below:
Step 1: Create an Oracle ADF Fusion Web Application. Create a demo.jspx page in the ViewController project.
Step 2: Drag and drop af:inputDate and set label=”Select Date”
Drag and drop af:resource and set type=”javascript”. The af:resource will be inside af:document
Write the below JavaScript function inside the af:resource
function disableKeyboardInput(event) { event.cancel(); }
Drag and drop af:clientListener inside af:inputDate and set method=”disableKeyboardInput” and type=”keyDown”
Thus, the complete code for demo.jspx page is shown below:
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="" version="2.1" xmlns:f="" xmlns:af=""> <jsp:directive.page contentType="text/html;charset=UTF-8"/> <f:view> <af:document title="demo.jspx" id="d1"> <af:resource type="javascript"> function disableKeyboardInput(event) { event.cancel(); } </af:resource> <af:form id="f1"> <af:inputDate label="Select Date" id="id1"> <af:clientListener method="disableKeyboardInput" type="keyDown"/> </af:inputDate> </af:form> </af:document> </f:view> </jsp:root>
Save and run the application. Thus, the ran application is shown below:
In the above af:inputDate field user won’t be able to enter date using keyboard nor the user will be able to remove the date using backspace of the keyboard
Hence, the solution to our requirement.
If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.
Thanks & Regards,
Susanto Paul
416 total views, 1 views today