Integrating jquery datepicker into jsf

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/8226840/integrating-jquery-datepicker-into-jsf