Bootstrap-Datetimepicker不起作用 [英] Bootstrap-Datetimepicker Not working
问题描述
我已经看了2天了，无法弄清楚我在做什么错.
I have been looking at this for 2 days, and cant figure out what I am doing wrong.
这是我的项目的摆弄. http://jsfiddle.net/dagger2002/RR4hw/
Here is a fiddle with my project. http://jsfiddle.net/dagger2002/RR4hw/
这是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>
这是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);
});
});
我没有任何错误，当我通过小提琴运行它时，它说没有发现错误.我是jQuery的新手，所以我不确定自己做错了什么.
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.
哦，是的.我正在为此使用长名称，进入一个也在使用moo工具的joomla网站中.
Oh yeah. I am using long name do to this going into a joomla site that is also using moo tools.
预先感谢.
更新
<!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>
此jFiddle起作用. http://jsfiddle.net/RR4hw/11/
This jFiddle works. http://jsfiddle.net/RR4hw/11/
但是，当我将其合并到常规页面中时，它会中断.不知道我在搞什么.
But when I incorporate it into a regular page it breaks. Not sure what I am messing up.
谢谢.
推荐答案
您的jsFiddle中的外部资源似乎存在一些问题.
There seemed to be some issues with the external resources in your jsFiddle.
我已经更新了 jsFiddle 可以正常工作.我更改了外部资源，并对代码进行了一些小的调整.
I have updated jsFiddle to work. I changed the external resources and made some minor adjustments to the code.
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);
});
});
更新
- 在您的jsFiddle中，您引用的是"bootstrap-datepicker.min.js"，而不是"bootstrap-datetimepicker.min.js".
- 似乎"bootstrap-datepicker.min.js"需要"moment.js"作为先决条件.请注意，包含事项的顺序.
- 最后，"en-gb.js"需要在"bootstrap-datetimepicker.min.js"之后列出.
使用工作解决方案更新了 jsFiddle .
Updated jsFiddle with working solution.
这篇关于Bootstrap-Datetimepicker不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
