JQuery JSP 中未显示日期选择器

Question

我正在使用 Struts2 开发一个网络应用程序，我已经创建了一个带有日期选择器的 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，并且日期选择器工作。

这是页面的源代码。

<%@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>'
        });
    }
});

Answer 1

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

Answer 2

我发现了错误....删除 class hasDatepicker 它有效...

JQuery JSP 中未显示日期选择器

JQuery datepicker not showing in JSP

java

jquery

jsp

jquery-ui

datepicker