ADF - Date picker (Using Jquery)

DatePicker in ADF


In recent Java One / Oracle develop conf - One of key note is Jquery is used in 56.87% of Top 10,000 sites.

Though we have all ease components to leverage our development in ADF equalising Jquery stuff, thought of using some Jquery stuffs with ADF.

 DatePicker - http://jqueryui.com/demos/datepicker/
Jquery Datepicker - The moment you click on the input, the date gets displayed.

ADF Input date - User need to click the icon  next to the Date input and then need to select the date.
ADF Date -User need to click the icon to get the Date displayed and then select the date.

with Jquery ADF Date component looks like normal input box -

when user click on the input box , the date gets displayed automatically;

The user will able to select the date immediately, and also since this is achieved through Jquery we can add any animations like slide out ,in etc that Jquery support.






I also request you to bring some good uses cases, so that we can incorporate more of Jquery to ADF.

To-do Code - 

Import all the Jquery lib as javascript resource- 

 <af:resource type="javascript" source="/lib/jquery/jquery-1.3.2.min.js"/>

 <af:resource type="javascript" source="/lib/jquery//jquery-1.7.2.js"/>

 <af:resource type="javascript" source="/lib/jquery/jquery.ui.core.js"/>

 <af:resource type="javascript" source="/lib/jquery/jquery.ui.widget.js"/>

 <af:resource type="javascript" source="/lib/jquery/jquery.ui.datepicker.js"/>

And then call the JQuery Function similar to calling Javascript

<af:resource type="javascript">

          function datepick() {

              $("input[name=datepicker]").datepicker( {

                  beforeShow : function (input, inst) {

                      inst.dpDiv.css( {

                          marginTop :  - input.offsetHeight + 'px', marginLeft : input.offsetWidth + 'px'

                      });

                  }

              });

              $("input[name=datepicker]").css("color", "blue");

          }

        </af:resource>

This function needs to associated to the input text

 <af:inputText label="Jquery Date" id="datepicker">

                  <af:clientListener method="datepick" type="mouseOver"/>

                </af:inputText>

You can also add any CSS to have a rich populated datapicker