JSP 中未显示 JQuery 日期选择器答案

【问题标题】：JQuery datepicker not showing in JSPJSP 中未显示 JQuery 日期选择器
【发布时间】：2015-08-18 08:19:18
【问题描述】：

我正在使用 Struts2 开发一个 webapp，并创建了一个带有日期选择器的 jsp。但是当我加载页面时，什么也没有发生。该插件似乎工作正常并生成日期选择器ui-datepicker-div

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>

但是当我关注#date 文本输入时，什么也没有发生。非常奇怪的是，我用简单的 HTML 来设计我的 jsps，并且 datepicker 可以工作。

这是页面的源代码。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html class=" js csstransforms3d">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><s:text name="application.title" /> | <s:property value="section.description" /> </title>
    <link href="<s:url value="/assets/css/styles.css"/>" rel="stylesheet" type="text/css">

    <link rel="shortcut icon" type="image/x-icon" href="<s:url value="/assets/img/favicon.ico" />" />
    <script type="text/javascript" src="<s:url value="/assets/js/vendors/modernizr/modernizr.custom.js"/>"></script>
</head>
<body>

    <!--Smooth Scroll-->
    <div class="smooth-overflow">
        <!--Navigation-->
        <s:include value="/views/sections/menu.jsp" />
        <!--/Navigation--> 

        <!--MainWrapper-->
        <div class="main-wrap"> 
            <!--Main Menu-->
            <s:include value="/views/sections/sidebar_left.jsp" />
            <!--/MainMenu--> 

            <!--Content Wrapper-->
            <div class="content-wrapper"> 

                <div class="page-header">
                    <h1><s:property value="section.description" /></h1>
                </div>

                <!-- Widget Row Start grid -->
                <div class="row" id="powerwidgets">
                    <div class="col-md-12 bootstrap-grid"> 
                        <s:include value="/views/sections/pages/block_messages.jsp" />
                    </div>
                </div>
                <!-- /Widgets Row End Grid--> 

                <div class="powerwidget dark-blue powerwidget-sortable" id="date-range" data-widget-editbutton="false" role="widget" style="">
                    <header role="heading">
                        <h2>Date Pickers</h2>
                    <div class="inner-spacer" role="content">
                        <form action="" id="data-pickers" class="orb-form">
                            <fieldset>
                                <section>
                                    <label class="label">Select date</label>
                                    <label class="input"> <i class="icon-append fa fa-calendar"></i>
                                        <s:textfield name="date" id="date" cssClass="hasDatepicker">
                                    </label>
                                </section>
                            </fieldset>
                            <footer>
                                <button type="submit" class="btn btn-default">submit</button>
                            </footer>
                        </form>
                    </div>
                </div>
            </div>
            <!-- / Content Wrapper --> 

        </div>
        <!--/MainWrapper--> 
    </div>
    <!--/Smooth Scroll--> 

    <!-- scroll top -->
    <s:include value="/views/sections/footer.jsp" />
    <!-- /scroll top -->

    <!--Scripts--> 
    <!--JQuery--> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/jquery/jquery.min.js" />"></script> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/jquery/jquery-dateFormat.min.js" />"></script> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/jquery/jquery-ui.min.js" />"></script> 

    <!--Forms--> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/forms/jquery.form.min.js" />"></script> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/forms/jquery.validate.min.js" />"></script>
    <!--Bootstrap--> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/bootstrap/bootstrap.min.js" />"></script> 

    <!--Main App--> 
    <script type="text/javascript" src="<s:url value="assets/js/scripts.js" />"></script>

    <s:include value="/views/sections/footer_scripts.jsp" />
    <!--/Scripts-->

</body>

在文件scripts.js 中，我初始化了日期选择器

$(document).ready(function() {
    if ($('#date').length) {
        $('#date').datepicker({
            dateFormat: 'dd.mm.yy',
            prevText: '<i class="fa fa-chevron-left"></i>',
            nextText: '<i class="fa fa-chevron-right"></i>'
        });
    }
});

【问题讨论】：

你是否包含了 jqueryUI 的 css 文件？
我使用的模板有他自己的 jqueryUI css，它们在 style.css 中
无论如何问题不在于css，因为当我将输入集中在简单的HTML页面中时，ui-datepicker-div被填充，在JSP内部没有任何反应
你使用像firebug这样的浏览器开发工具吗？这可能有助于向我们展示任何问题
我发现了错误......<s:textfield name="date" id="date" cssClass="hasDatepicker">删除类hasDatepicker它有效......

标签： java jquery jsp jquery-ui datepicker

【解决方案1】：

定义form标签上方的所有.js文件。

【讨论】：

【解决方案2】：

我发现了错误......删除类 hasDatepicker 它可以工作......

【讨论】：