The title will start making sense as you read through my post.
Below is how standard ADF Input Date component looks like:
Well, what if you wanted a component similar to Input Date. This component should not allow the user to type the date. It would only allow the user to pick the date using the date picker.
It is not possible to do this by setting properties like disabled or readonly on the input date component.
Disabled:
ReadOnly:
As you see above setting the Disabled: true or ReadOnly: true on the input date component does not help in solving the problem.
There could be many ways to solve this problem. A few of them I could think of are described as below:
1. This could be achieved by javascript, css and/or both.
2. This could be achieved by JQuery (Note to self: another interesting POC for a separate post).
3. This could also be achieved completely in ADF without the use of any javascript (well technically we will be using javascript for closing the popup, but this solution relies heavily on ADF as you will see ahead).
I will be walking through approach #3 as I believe this is the easiest, quickest and does not rely too much on javascript.
Please note that I am using JDeveloper 11.1.1.7 version for this solution.
I am using the below components for the solution:
1. Output Text: with the Value set to a bean property.
2. Command button with showpopupbehaviour inside it opening the popup for selecting date
3. Popup with ChooseDate and InputDate components inside of the the popup.
- The InputDate component has the chooseid as the id of the ChooseDate component and visible: false.
It also has autosubmit: true and value change listener calling a bean method.
Most of the logic is written in the value change listener of the Input Date in the Popup.
Below is the behaviour:
1 ->
2 ->
3 ->
Below is my jspx code:
Below is my bean code:
You could have used any other component like button which will change the text to the selected date instead of the output text.
No comments:
Post a Comment