Customize jquery datepicker and its integration in ADF

ADF has a component <af: inputDate>, which is used to insert a date to the java.util.Date object. When you click on the calendar thumbnail, following popup calendar appears (styled).

The mechanism is simple, but it has one major drawback - the popup is opening up to 1 second which is quite long for end users.

I decided to change the component and use jquery datepicker, which opens instantly. In addition, it has an additional advantage: it has easy editor for customizing the calendar. On page:
https://jqueryui.com/themeroller/ we can generate template and save its jquery + CSS + images package. The structure is as follows:

We can use generated  packet in the ADF application . To do this, move the folder to the application:

I replace a component <af: inputDate> to <af: inputText> adding clisentListener and convertDateTime:

<!--<af:inputDate value="#{pageFlowScope.mb1.startDateFrom}"
    >
 <af:clientAttribute name="preventNoteWindow" value="true"/>
 <af:convertDateTime pattern="dd-MM-yyyy"/>
</af:inputDate>-->
<af:inputText value="#{pageFlowScope.mb1.startDateFrom}" autoSubmit="true"  id="it10" >
 <af:clientListener method="ksed.pickdate" type="mouseOver" />
 <af:convertDateTime pattern="dd-MM-yyyy"/>
</af:inputText>

Of course, we must add jquery and css files for configuration. PortalBundle file (the path must be compatible with the imported project):

global.resources.js.jQuery.path=/js/jquery-1.11.1.min.js
global.resources.js.jQueryui.path=/js/datepicker/jquery-ui.js
global.resources.js.jQuery.css.path=/js/datepicker/jquery-ui.css

Add to the view:

  <af:resource type="javascript" source="${portalBundle['global.resources.js.jQuery.path']}"/> 
  <af:resource type="css" source="${portalBundle['global.resources.js.jQuery.css.path']}"/>
 <af:resource type="javascript" source="${portalBundle['global.resources.js.jQueryui.path']}"/>

And now you can use the datepicker in the functions js:

ksed.pickdate = function(ev){     
    try {
            var id = ev.getSource().getClientId();
            jQuery('input[name="'+id+'"]').datepicker({
            dateFormat: "dd-mm-yy",
            monthNames : [ "Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień" ],
            firstDay: 1,
            dayNamesMin: ['N', 'PN', 'WT', 'ŚR', 'CZ', 'PT', 'SO']
        });
                
    }
    catch(err) {
        tpl.log(err);
    } 
     
};

If all goes well, after that when you click in the box, calendar should appear :