Datepicker 在搜索弹出窗口中不起作用答案

【问题标题】：Datepicker isn't working inside search popupDatepicker 在搜索弹出窗口中不起作用
【发布时间】：2014-12-04 11:08:32
【问题描述】：

我已经使用 Struts2 和它的 JQuery 插件大约一周了，我有点迷茫。

我尝试做的最后一件事是在我在页面上显示的 jqGrid 中实现按日期搜索。为此，我关注了this tutorial here.

问题是它不起作用，因为当我单击应该弹出日期选择器的搜索字段时，它不会弹出任何内容。我调试了 javascript 代码，发现当它尝试调用datepicker() 函数时，会出现错误提示“Uncaught TypeError: Undefined is not a function”。

我不确定为什么会发生这种情况，因为我使用的是Struts2-jquery-plugin 3.7.1。我在下面发布了我的 JSP 代码（我省略了所有与问题无关的网格行）：

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sj:head jqueryui="true" jquerytheme="south-street" locale="es" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
 datePick = function(elem) {
        $(elem).datepicker({
            firstDay : 1
        });
        $('#ui-datepicker-div').css("z-index", 2000);
}
</script>
<title>Testing</title>
</head>
<body>
<s:url var="remoteurl" action="reservationList"/>
<div id="grid">
    <sjg:grid
        id="reservationsGrid"
        caption="%{getText('reservationTable.title')}"
        dataType="json"
        href="%{remoteurl}"
        pager="true"
        gridModel="gridModel"
        rowList="10,15,30"
        rowNum="15"
        navigator="true"
        navigatorSearch="true"
        autowidth="true"
        navigatorSearchOptions="{multipleSearch:true, closeAfterSearch:true}">
        ...
        <sjg:gridColumn name="date" index="date" title="Date" search="true" formatter="date" sortable="true"  formatoptions="{newformat : 'd/m/Y H:i', srcformat : 'Y-m-d H:i'}" searchoptions="{sopt:['eq','lt','le','gt','ge'], dataInit:datePick}"/>
       ...
    </sjg:grid>

 </div>
</body>
</html>

我是否缺少任何导入/引用或类似的东西？

更新
最近我发现了一个 hack，它告诉我这个问题与日期选择器的导入/引用有关：

我所做的只是在我的 JSP 中添加一个新标签：
<sj:datepicker style="display:none" disabled="true"></sj:datepicker>

通过这样做，我想我是在强制框架自动导入和初始化一个日期选择器，所以它可以工作，但这不是我正在寻找的解决方案。

那么我的问题是： 如何导入/引用和初始化日期选择器？

【问题讨论】：

尝试用 jQuery 替换 $。要检查 datepicker 是否存在，请在控制台中运行 jQuery.fn.datepicker。
@CerlinBoss 你能澄清一下你建议的替换吗？我在控制台中运行了jQuery.fn.datepicker，但遗憾的是它返回未定义。
这意味着您没有包含日期选择器的库。
非常感谢您的回复，@AleksandrM。它似乎适用于您回复的解决方案，请将其作为答案发布，我会接受它:)。我已经搜索了文档并阅读了 loadAtOnce HERE 的作用，但仍然不明白。你能解释一下吗？
@AleksandrM 好吧，我做了一些研究，终于明白了 loadAtOnce 代表什么，但如果你想包含它以使你的答案更令人满意，我认为这对社区来说会更有趣： )

标签： javascript jquery struts2 struts2-jquery

【解决方案1】：

默认情况下<sj:head> 不会加载所有 jQuery ui 资源，而是按需加载。当您添加 <sj:datepicker> 标记后，它还会加载所需的资源并且您的脚本能够运行。

为了一次性加载所有资源，将<sj:head>标签的loadAtOnce属性设置为true。

<sj:head jqueryui="true" loadAtOnce="true"
         jquerytheme="south-street" locale="es" />

【讨论】：