JQuery datepicker не отображается в JSP

Я разрабатываю webapp используя Struts2, и я создал jsp с дампикером на нем. Но когда я загружаю страницу, ничего не происходит. Плагин, кажется, работает хорошо, и генерирует DatePicker ui-datepicker-divJQuery datepicker не отображается в JSP

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

но когда я сосредоточиться на входе ничего #date текста не происходит. Очень странно, что я использую для разработки jsps с простым HTML, и функция 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 я имею инициализацию DatePicker

$(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>' 
     }); 
    } 
});

источник

2015-08-18 IlGala

Вы включили CSS файл для jqueryUI? – RRK

Шаблон, который я использую, имеет свой собственный css для jqueryUI, и они внутри style.css – IlGala

В любом случае проблема не в css, потому что когда я фокусирую вход на простой HTML-странице, '' ui-datepicker-div' заселено, внутри JSP ничего не происходит – IlGala

Я нашел ошибку .... удаления hasDatepicker класса это работает ...

источник

2015-10-28 16:04:50 IlGala

Определить файл выше тега формы все .js.

источник

2015-08-18 11:30:32 sanjay

JQuery datepicker не отображается в JSP

ответ

Смежные вопросы