Integrating jquery datepicker into jsf

java jquery jquery-ui jsf jsf-2

11,123

The jQuery ID selector must match exactly the generated HTML client ID, which you can see when you do rightclick and view source in browser.

Rather use a hook on the classname instead, this also allows you to select multiple elements. E.g.

$(".datepicker").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true
});

with

<h:inputText value="#{listModel.creationDate}" styleClass="datepicker"
    valueChangeListener="#{listController.filterFieldChanged}">
    <f:convertDateTime pattern="yyyy-mm-dd"/>
</h:inputText>

<h:inputText value="#{listModel.updateDate}" styleClass="datepicker"
    valueChangeListener="#{listController.filterFieldChanged}">
    <f:convertDateTime pattern="yyyy-mm-dd"/>
</h:inputText>

11,123

Francesco

Updated on June 13, 2022

Comments

Francesco almost 2 years

I was following the examples here and here but I cann't bring it to work. Could you help me please?

Here is where I define the script and below where I (suppose to) use it...

<script>
$(function() {
    $( "#createDate" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true
    });
});
</script>

<ui:define name="columnFilters">
    <th>
        <h:inputText value="#{listModel.creationDate}" id="creationDate"
            valueChangeListener="#{listController.filterFieldChanged}">
            <f:convertDateTime pattern="yyyy-mm-dd"/>
        </h:inputText>
    </th>
    <th>
        <h:inputText value="#{listModel.updateDate}" id="upateDate"
            valueChangeListener="#{listController.filterFieldChanged}">
            <f:convertDateTime pattern="yyyy-mm-dd"/>
        </h:inputText>
    </th>
    <th> &nbsp; </th>
</ui:define>

Francesco over 12 years

Hello BalusC, I changed the code as you suggested and now my script looks like this: <script type="text/javascript" language="javascript"> //<![CDATA[ $(function() { $(".datepicker").datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); }); //]]> </script> But in the console of firebug I see "$(".datepicker").datepicker is not a function"... What am I missing?
BalusC over 12 years

You forgot to import the necessary jQuery scripts by <script> in <head>.
Francesco over 12 years

This is a portion of my head and the scripts should be there (or not?) <script type="text/javascript" src="/doi-web/javax.faces.resource/jquery.js.xhtml?ln=script‌s"></script><script type="text/javascript" src="/doi-web/javax.faces.resource/datepicker.js.xhtml?ln=sc‌ripts"></script><scr‌ipt type="text/javascript" src="/doi-web/javax.faces.resource/eye.js.xhtml?ln=scripts">‌</script><script type="text/javascript" src="/doi-web/javax.faces.resource/layout.js.xhtml?ln=script‌s"></script><script type="text/javascript" src="/doi-web/javax.faces.resource/utils.js.xhtml?ln=scripts‌"></script>
BalusC over 12 years

Does it contain the valid scripts? Your script needs to be called after those script are loaded.
Francesco over 12 years

Yep, it was a problem of scripts. I downloaded the wrong/old/fake ones... Thank you very much for your always usefull help!!