javascript 如何使用 JQuery 日期时间选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31967293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use JQuery DateTime Picker?
提问by user3692825
I am a beginner programmer and I'm trying to make a web page that displays a JQuery Inline Date and Time Picker. As I was researching, I found this documentation: DateTimePicker. I followed the steps of first importing the JS and CSS files (after the closing body tag) using these tags:
我是一名初学者程序员，我正在尝试制作一个显示 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>
Following those tags, I called on my <input>from my Home.htmlfile with the id of datetimepicker. Then using that id, I copied the code from the tutorial that creates the Inline DateTime Picker Calendar, like so:
按照这些标签，我<input>从我的Home.html文件中调用了我的 id datetimepicker。然后使用该 ID，我从创建内联日期时间选择器日历的教程中复制了代码，如下所示：
$('#datetimepicker').datetimepicker({
inline:true
});
So my Home.htmlfile looks like this:
所以我的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>
However, when I run this code, I get an error that says:
但是，当我运行此代码时，我收到一条错误消息：
TypeError: 'undefined' is not a function (evaluating '$('#datetimepicker').datetimepicker({
inline:true
})')
This is what is displaying:
这是显示的内容：
This is what I want to display:
这是我想要显示的内容：
How can I get an Inline calendar to display on my Home.htmlpage?
如何让内联日历显示在我的Home.html页面上？
采纳答案by shaz
You need to include jquery-ui.js
你需要包含 jquery-ui.js
回答by vinayak hegde
I had the same sort of issue , If download the the source code from the XDSoft site
我有同样的问题，如果从XDSoft 站点下载源代码
there is build folder , try using jquery.datetimepicker.full.jsfile from build folder .
有构建文件夹，尝试使用构建文件夹中的jquery.datetimepicker.full.js文件。
回答by Praveen Kumar Purushothaman
Do not confuse between jQuery versions. You first referenced jQuery here:
不要混淆 jQuery 版本。您首先在这里引用了 jQuery：
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
And then you are doing it here:
然后你在这里做：
<script src="./jquery.js"></script>
Please remove one. As the newer jQuery will be active and it doesn't have the plugin registered.
请删除一个。由于较新的 jQuery 将处于活动状态并且它没有注册插件。
回答by tallpaul
Put
放
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="./jquery.datetimepicker.js"></script>
between your <head></head>tags and remove
在您的<head></head>标签之间并删除
<script src="./jquery.js"></script>
