【问题标题】: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 SnippetJSFiddle 中重现它。请参阅如何创建 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 引用
猜你喜欢
  • 1970-01-01
  • 2018-12-03
  • 2012-07-28
  • 2012-07-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多