jQuery datepicker 在页面中不起作用答案

【问题标题】：jQuery datepicker doesn't work in a pagejQuery datepicker 在页面中不起作用
【发布时间】：2016-11-10 17:46:33
【问题描述】：

我正在尝试在我的页面中使用 jQuery 日期选择器（此处显示的是 https://jqueryui.com/datepicker/#default）。但是真的不行！当我点击文本框时，会显示任何日历。

这是我页面的代码：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>

  <title>Dashboard</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- MetisMenu CSS -->
<link href="css/metisMenu.min.css" rel="stylesheet">

<!-- Timeline CSS -->
<link href="css/timeline.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="css/startmin.css" rel="stylesheet">

  <!-- Morris Charts CSS -->
  <link href="css/morris.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

 </head>
<body>


  <!-- Page Content -->
  <div id="page-wrapper">
      <div class="container-fluid">

          <div class="row">
              <div class="col-lg-12">
                  <h1 class="page-header">Reports e stampe</h1>
              </div>
          </div>

        <form method="post" action="page1.php" target="_blank">
            <p>Date: <input type="text" id="datepicker"></p>
        </form>
      </div>
    </div>

  </div>

 <!-- jQuery -->
 <script src="js/jquery.min.js"></script>

 <!-- Bootstrap Core JavaScript -->
 <script src="js/bootstrap.min.js"></script>

 <!-- Metis Menu Plugin JavaScript -->
 <script src="js/metisMenu.min.js"></script>

 <!-- Custom Theme JavaScript -->
 <script src="js/startmin.js"></script>

</body>
</html>

感谢您的帮助！！

【问题讨论】：

寻求代码帮助的问题必须包含最短的代码，以便在问题本身最好是在Stack Snippet 或JSFiddle 中重现它。请参阅如何创建 Minimal, Complete, and Verifiable example。
您是否在控制台中遇到任何错误？
你收到的错误信息是什么？
在编辑中删除了 php 标签，标题也应该反映这一点
好吧，如果这确实与 php 相关；这将取决于您如何使用它；在托管网站上？当地的？如果本地为http://localhost/ 或直接在浏览器中file:///？问题太不清楚了。定义“不起作用”。

标签： jquery html jquery-ui datepicker

【解决方案1】：

我看到您两次包含 jQuery（在标题和底部）。这肯定是问题所在。首先要尝试的是删除最后一个 jQuery 引用。

下一步将进行重构，将所有脚本引用和代码移至页面的最底部，以提高页面加载性能，但这与您的问题并不严格相关，只是一种改进。

编辑

现在我们知道最后一个参考是问题所在，我将写下您应该如何处理 better performance 的特定页面上的脚本。请注意，我将所有脚本移到了最底部。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

  <title>Dashboard</title>
  <!-- Bootstrap Core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- MetisMenu CSS -->
  <link href="css/metisMenu.min.css" rel="stylesheet">

  <!-- Timeline CSS -->
  <link href="css/timeline.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="css/startmin.css" rel="stylesheet">

  <!-- Morris Charts CSS -->
  <link href="css/morris.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

 </head>
    <body>

    .... HTML CONTENT

    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>

    <!-- jQuery UI -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="js/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="js/startmin.js"></script>

    <script>
    $( function() {
        $("#datepicker").datepicker();
    });
    </script>

    </body>
</html>

【讨论】：

谢谢！它只删除最后一个 jQuery 引用