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

【问题标题】：How to use JQuery DateTime Picker?如何使用 JQuery 日期时间选择器？
【发布时间】：2015-11-05 04:26:42
【问题描述】：

我是一名初级程序员，我正在尝试制作一个显示 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 页面上？

【问题讨论】：

你已经引用 jquery 两次
我正在使用 Google Maps API，如果我删除了我引用的第一个 API，则地图不会加载。如果我删除第二个，日历仍然无法加载。

标签： javascript jquery html datetime datetimepicker

【解决方案1】：

放

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你需要包含 jquery-ui.js

【讨论】：

我确实下载了它，现在我已经引用了它。我将 JS 和 CSS 文件放在我的公共目录中的相应文件夹中。但是，日历仍然没有显示。

【解决方案4】：

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

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

然后你在这里做：

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

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

【讨论】：

如果我删除第一个，我的程序的其余部分将无法运行，因为我使用的是 Google Maps API。如果我删除第二个（），那么日历仍然不显示。我只得到一个输入字段。