Sunday, September 20, 2015

ADF: Add a calendar selector to inputText

There was a requirement posted in JDeveloper & ADF forums to add a calendar selector to a inputText so any text could be inserted and also a date could be selected. I am going to show you the solution I gave (Link)
You can download this example from my Github repository.

We need a inputText and a inputDate.

Next step is to set inputDate value to the inputText.

To achieve this, we have to use autoSubmit true in the inputDate and set the new value to the inputText in the valueChangeListener. We also have to set a partialTrigger so our inputText is automatically refreshed as son as the value in the inputDate is submitted.

This is the valueChangeListener that we are going to use.

In this method we have also to create a Date object and format it becasuse we would find in the inputText something like this:

Tue Jul 07 00:00:00 CEST 2015

findComponentInRoot method can be found in JSFUtils class.

At this point we already have the value in both components.

The last step is to beautify our component becasue we dot want to neither labels nor inputDate content box.
We have to add a panelLabelAndMessage surrounding both components and use simple property to hide both labels.

We have also to make add a style class to inputDate components as we don't want to edit all inputDates style.

The last step is to make some skining so we can hide content box of the inputDate using the style class we added to the component.

If we run the application we can see our new "component" working.

No comments:

Post a Comment