将 jquery datepicker 集成到 jsf 中答案

【问题标题】：Integrating jquery datepicker into jsf将 jquery datepicker 集成到 jsf 中
【发布时间】：2012-01-03 20:08:12
【问题描述】：

我按照 here 和 here 的示例进行操作，但无法将其用于工作。你能帮帮我吗？

这里是我定义脚本的地方，下面是我（假设）使用它的地方......

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

【问题讨论】：

除非您不使用属性 forceid（或类似属性）= true，否则 JSF 框架将创建它自己的 id 值。这些值将与您的 id 和一个随机生成的实习生数字组合在一起。顺便提一句。检查您的 HTML 代码，从您的浏览器生成什么对象。

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

【解决方案1】：

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

而是在类名上使用挂钩，这也允许您选择多个元素。例如

$(".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>

【讨论】：

您好 BalusC，我按照您的建议更改了代码，现在我的脚本如下所示：<script type="text/javascript" language="javascript"> //<![CDATA[ $(function() { $(".datepicker").datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); }); //]]> </script> 但在萤火虫的控制台中，我看到 "$(".datepicker").datepicker 不是函数”...我错过了什么？
您忘记在<head> 中通过<script> 导入必要的jQuery 脚本。
这是我头脑的一部分，脚本应该在那里（或不在那里？）
它是否包含有效的脚本？您的脚本需要在这些脚本被加载之后被调用。
是的，这是脚本的问题。我下载了错误的/旧的/假的...非常感谢您一直以来的有用帮助！