Question

有人可以帮我解决这个问题。有什么问题吗？因为我在运行日历时无法显示日历。

<!DOCTYPE html>
<html>
  <head>
    <link href="CSS/Master.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="Holder"></div>
    <div id="Datepicker1"></div>
    </div>

    <script type="text/javascript">
      $(function() {
        $("#Datepicker1").datepicker({
          numberOfMonths:3
        }); 
      });

  </body>

</html>

Answer 1

如评论中所述，您尚未包含jQuery或jQuery UI，并且您的HTML结束标记不正确。如果您在jqueryui网站上查看演示的来源，您会发现代码与您的代码有所不同。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
  </head>
  <body>
    <p>Date: <input type="text" id="datepicker"></p>
  </body>
</html>

要在您的代码中实现这一点，它将是：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
    <link href="CSS/Master.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="holder"></div>
    <div id="datepicker1"></div>
    <script type="text/javascript">
      $(function() {
        $("#datepicker1").datepicker({
          numberOfMonths:3
        }); 
      });
    </script>
  </body>
</html>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

Answer 2

你必须包含jQuery和jQuery UI（我在你的标记中改变了一些东西）：

<!DOCTYPE html>
<html>
  <head>
    <!-- <link> doesn't need a closing tag -->
    <link href="CSS/Master.css" rel="stylesheet" type="text/css">
    <!-- include the jQuery UI style sheet -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- include jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <!-- include jQuery UI -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
    <div id="Datepicker1"></div>

    <script type="text/javascript">
      $(function() {
        $("#Datepicker1").datepicker({
         numberOfMonths: 3
        }); 
      });
    </script>
    
  </body>
</html>

在html页面中显示日历（日期选择器）

2 个答案: