JQuery Usage in ADF - Simple Example

I just tried to use JQuery in ADF with simple DatePicker example. Refer following steps to show datepicker using JQuery.

• Import required JQuery & CSS scripts into page using af:resource tag (In this example, I referred scripts from Google CDN & JQuery CDN):

            <af:resource type="javascript" source="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
            <af:resource type="javascript"
                         source="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"/>
            <af:resource type="css" source="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css"/>

• Add Java Script function to show datepicker: (Additional properties enabled for datepicker to change month, year etc)

            <af:resource type="javascript">
              function pickdate() {
                  $("input[name=it1]").datepicker({
                  showButtonPanel: true,
                  dateFormat: "DD, d MM, yy",
                  changeMonth: true,
                  changeYear: true
                  });
              }
            </af:resource>

• Add af:inputText component with af:clientListener to trigger Java Script:

            <af:form id="f1">
                <af:panelStretchLayout id="psl1" styleClass="AFStretchWidth" dimensionsFrom="children">
                    <f:facet name="center">
                        <af:panelGroupLayout id="pgl1" halign="center" layout="horizontal">
                            <af:panelBox text="Test JQuery" id="pb1" showDisclosure="false" type="flow">
                                <f:facet name="toolbar"/>
                                <af:inputText label="Select Date" id="it1">
                                    <af:clientListener method="pickdate" type="mouseOver"/>
                                </af:inputText>
                            </af:panelBox>
                        </af:panelGroupLayout>
                    </f:facet>
                </af:panelStretchLayout>
            </af:form>

• Run your page and click on Input text field to show Date Picker.