同时使用datepicker和jQuery对话框功能

时间:2017-12-18 14:11:40

标签: jquery css twitter-bootstrap jquery-ui-datepicker

我需要使用Bootstrap使用datepicker和jQuery对话框功能。为此,我使用了这些链接:

  <link rel="stylesheet" href="resources/bootstrap.3.3.7/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="resources/bootstrap.3.3.7/js/bootstrap.min.js"></script>


<link href="resources/css/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="resources/jquery_ui/jquery-ui.min.js"></script>

<link href="resources/css/tables.css" rel="stylesheet" type="text/css" />
<link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
<link href="resources/css/forms.css" rel="stylesheet" type="text/css" />
<link href="resources/css/style.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>


<!-- for the date -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

在jsp的主体中:

$(function(){

    dialog_info =  $( "#dialog" ).dialog({
          autoOpen: false,
          resizable: false,
          height: "auto",
          width: 300,
          modal: true

        }); 

    });

<div id="dialog" title="Caricamento pagina">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span><span id="warn_message"></span></p>
</div>

我无法达到结果,使“Caricamento pagina”成为一个对话框,使其隐藏在开头然后显示,因为$(function)中的代码不起作用。我也尝试过:

$(document).ready(function() {
    dialog_info =  $( "#dialog" ).dialog({
          autoOpen: false,
          resizable: false,
          height: "auto",
          width: 300,
          modal: true

        }); 

    }
)

(应该是一样的),没有结果。也许上面的链接存在兼容性问题?考虑到,在另一个不需要datepicker的页面中,代码使用这些链接:

<link rel='stylesheet'  href='webjars/bootstrap/3.2.0/css/bootstrap.min.css'>       
<script type="text/javascript" src="webjars/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"  src="webjars/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="resources/css/tables.css" rel="stylesheet" type="text/css" />
<link href="resources/css/buttons.css" rel="stylesheet" type="text/css" />
<link href="resources/css/forms.css" rel="stylesheet" type="text/css" />
<link href="resources/css/style.css" rel="stylesheet" type="text/css" />
<link href="resources/css/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="resources/jquery_ui/jquery-ui.min.js"></script>

但是在第一页我需要datepicker所以上面显示的链接是必要的。请帮忙。提前谢谢。

1 个答案:

答案 0 :(得分:0)

我解决了获取所有链接文件的问题,将它们放在本地文件夹中并将jsp链接到本地​​。假设他们在任何时候都没有加载......