Question

我正在尝试在我的页面中使用jQuery datepicker（此处显示的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>

感谢您的帮助!!

Answer 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>  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/metisMenu.min.css" rel="stylesheet">  <link href="css/timeline.css" rel="stylesheet">  <link href="css/startmin.css" rel="stylesheet">  <link href="css/morris.css" rel="stylesheet">  <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> </head> <body> .... HTML CONTENT  <script src="js/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  <script src="js/bootstrap.min.js"></script>  <script src="js/metisMenu.min.js"></script>  <script src="js/startmin.js"></script> <script> $( function() { $("#datepicker").datepicker(); }); </script> </body> </html>

jQuery datepicker在页面中不起作用

1 个答案: