将jquery datepicker集成到jsf中

时间:2011-11-22 12:29:44

标签: java jquery jquery-ui jsf jsf-2

我正在关注示例herehere,但我无法将其付诸实践。你能帮帮我吗?

这是我定义脚本的地方,下面是我(假设)使用它的地方......

<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 个答案:

答案 0 :(得分:7)

jQuery ID选择器必须与生成的HTML客户端ID完全匹配,您可以在浏览器中右键单击并查看源时看到该ID。

而是在类名上使用钩子,这也允许您选择多个元素。 E.g。

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

<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>