Java JQuery日期选择器未显示在JSP中

Java JQuery日期选择器未显示在JSP中,java,jquery,jsp,jquery-ui,datepicker,Java,Jquery,Jsp,Jquery Ui,Datepicker,我正在使用Struts2开发一个webapp,我已经创建了一个带有日期选择器的jsp。但是当我加载页面时,什么都没有发生。该插件似乎工作正常,并生成datepickerui datepicker div 但是当我聚焦于#日期文本输入时,什么都没有发生。非常奇怪的是,我用简单的HTML设计JSP,datepicker可以工作 以下是该页面的源代码 <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib p

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

但是当我聚焦于
#日期
文本输入时,什么都没有发生。非常奇怪的是,我用简单的HTML设计JSP,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>

在表单标记上方定义所有.js文件。

我发现了错误。。。。删除类hasDatepicker它是有效的…

您是否为jqueryUI包含css文件?我使用的模板对jqueryUI有自己的css,并且它们是内部样式。csa问题不在于css,因为当我在简单HTML页面中集中输入时,
ui datepicker div
会被填充,在JSP内部什么都没有发生您是否使用firebug之类的浏览器开发工具?这可能有助于我们发现任何问题我发现了错误
删除类hasDatepicker它可以工作。。。
$(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>'
        });
    }
});