jQuery Bootstrap-Datetimepicker 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22846525/
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
Bootstrap-Datetimepicker Not working
提问by dagger2002
I have been looking at this for 2 days, and cant figure out what I am doing wrong.
我一直在看这个 2 天，无法弄清楚我做错了什么。
Here is a fiddle with my project. http://jsfiddle.net/dagger2002/RR4hw/
这是我的项目的小提琴。http://jsfiddle.net/dagger2002/RR4hw/
Here is the HTML
这是 HTML
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Here is the Jquery.
这是Jquery。
jQuery(function () {
jQuery('#startDate').datetimepicker();
jQuery('#endDate').datetimepicker();
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change",function (e) {
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
});
I am getting no errors and when I run it through fiddle it says no errors found. I am new to jQuery so I am not sure what I am doing wrong.
我没有收到任何错误，当我通过 fiddle 运行它时，它说没有发现错误。我是 jQuery 的新手，所以我不确定我做错了什么。
Oh yeah. I am using long name do to this going into a joomla site that is also using moo tools.
哦耶。我正在使用长名称做这个进入一个也使用 moo 工具的 joomla 站点。
Thanks in Advance.
提前致谢。
UPDATE
更新
<!doctype html>
<html lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="x-ua-compatible" content="IE=edge,chrome=1" />
<title>DateTime Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- Style Sheets -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js" type="text/javascript"></script>
<script>
jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
</head>
<body>
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This jFiddle works. http://jsfiddle.net/RR4hw/11/
这个 jFiddle 有效。http://jsfiddle.net/RR4hw/11/
But when I incorporate it into a regular page it breaks. Not sure what I am messing up.
但是当我将它合并到常规页面时，它会中断。不知道我在搞什么。
Thanks in advance.
提前致谢。
采纳答案by malkassem
There seemed to be some issues with the external resources in your jsFiddle.
您的 jsFiddle 中的外部资源似乎存在一些问题。
I have updated jsFiddleto work. I changed the external resources and made some minor adjustments to the code.
我已经更新了jsFiddle来工作。我更改了外部资源并对代码进行了一些小的调整。
HTML
HTML
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT
爪哇脚本
jQuery(function () {
jQuery('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
jQuery('#endDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change",function (e) {
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
});
UPDATE
更新
- In your jsFiddle, you reference "bootstrap-datepicker.min.js" and not "bootstrap-datetimepicker.min.js".
- it seems that "bootstrap-datepicker.min.js" needs "moment.js" as a prerequisite. Please note that the order of includes matter.
- Finally, "en-gb.js" needs to be listed after "bootstrap-datetimepicker.min.js".
- 在您的 jsFiddle 中，您引用了“bootstrap-datepicker.min.js”而不是“bootstrap-datetimepicker.min.js”。
- 似乎“bootstrap-datepicker.min.js”需要“moment.js”作为先决条件。请注意，包括事项的顺序。
- 最后，需要在“bootstrap-datetimepicker.min.js”之后列出“en-gb.js”。
Updated jsFiddlewith working solution.
使用工作解决方案更新了jsFiddle。
回答by Jeevanantham
Script include order in jsFiddle is not working, below is the modified order for workable sample. As suggested by @malkassem moment.js is required for bootstrap date picker to work.
jsFiddle 中的脚本包含顺序不起作用，以下是可行示例的修改顺序。正如@malkassem 所建议的，moment.js 是引导日期选择器工作所必需的。
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>`
回答by Moji
Easiest way to get date and/or time picker working is by installing below package
让日期和/或时间选择器工作的最简单方法是安装以下软件包
Install-Package Bootstrap.v3.Datetimepicker.CSS
and then reference installed files in _Layout
然后在 _Layout 中引用已安装的文件
<!-- JS -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script> <!-- Bootstrap v3.3.5 -->
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/Core.js"></script>
and then add below script to layout page before </body>tag
然后在</body>标签之前将以下脚本添加到布局页面
<script>
jQuery(document).ready(function () {
jQuery('.datepicker').datetimepicker({ format: 'DD/MM/YYYY' });
jQuery('.datetimepicker').datetimepicker();
});
</script>
in Razor view use as below
在 Razor 视图中使用如下
@Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "form-control datepicker" } })
@Html.EditorFor(model => model.MyDateTime, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
回答by j-j
For those who are using ASP MVC's default _Layout.cs file, Remove these script imports at bottom or put it on the top.
对于那些使用 ASP MVC 的默认 _Layout.cs 文件的人，删除底部的这些脚本导入或将其放在顶部。
Scripts.Render("~/bundles/jquery")
Scripts.Render("~/bundles/bootstrap")
