如何使用 JQuery 日期时间选择器？

Question

我是一名初级程序员，我正在尝试制作一个显示 JQuery 内联日期和时间选择器的网页。在我进行研究时，我发现了这个文档：DateTimePicker。我按照首先使用这些标签导入 JS 和 CSS 文件（在结束 body 标签之后）的步骤进行操作：

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>

在这些标签之后，我从我的 Home.html 文件调用了我的 <input>，ID 为 datetimepicker。然后使用该 ID，我从创建内联日期时间选择器日历的教程中复制了代码，如下所示：

  $('#datetimepicker').datetimepicker({
     inline:true
  });

所以我的 Home.html 文件如下所示：

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">

   <title>Home</title>
   <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">

   <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

   <link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>

 </head>
 <body>
     <h3>Inline DateTimePicker</h3>
     <input type="text" id="datetimepicker"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
 </body>
 <!-- CALLS JQUERY LIBRARY FOR DATE AND TIME PICKER -->
 <!-- this should go after your </body> -->
  <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
  <script src="./jquery.js"></script>
  <script src="./jquery.datetimepicker.js"></script>
  <script>
      $('#datetimepicker').datetimepicker({
        inline:true
      });
  </script>
</html>

但是，当我运行这段代码时，我收到一条错误消息：

TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
    inline:true
  })')

显示内容如下：

这是我要显示的内容：

如何让内联日历显示在我的 Home.html 页面上？

Answer 1

不要混淆 jQuery 版本。您首先在此处引用了 jQuery：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

然后你在这里做:

<script src="./jquery.js"></script>

请删除一个。因为较新的 jQuery 将处于活动状态并且它没有注册插件。

Answer 2

您需要包括 jquery-ui.js

Answer 3

放

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >    
<script src="./jquery.datetimepicker.js"></script>

在您的 <head></head> 标签之间并删除

<script src="./jquery.js"></script>

Answer 4

我遇到了同样的问题，如果从 XDSoft site 下载源代码

有构建文件夹，尝试使用构建文件夹中的 jquery.datetimepicker.full.js 文件。

如何使用 JQuery 日期时间选择器？

How to use JQuery DateTime Picker?

javascript

jquery

html

datetime

datetimepicker