Bootstrap-Datetimepicker不工作

我一直在看这个2天，并且无法弄清楚我做错了什么。

这是我的项目的小提琴。 http://jsfiddle.net/dagger2002/RR4hw/

这是HTML

 
 
 
 
Start
 
    
 
 
 
 
 
End
 
    
 
 
 
  

这是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的新手，所以我不确定我做错了什么。

哦耶。 我正在使用长名称来进入一个也使用moo工具的joomla网站。

提前致谢。

UPDATE

                    jQuery.noConflict(); // Code that uses other library's $ can follow here.    
 
 
 
 
Start
 
     
 
 
 
 
 
End
 
    
 
 
 
 
   

这个jFiddle工作。 http://jsfiddle.net/RR4hw/11/

但是当我将它合并到一个常规页面时，它会中断。 不知道我搞砸了什么。

提前致谢。

Answer 1

jsFiddle中的外部资源似乎存在一些问题。

我已经更新了jsFiddle工作。 我更改了外部资源并对代码进行了一些小的调整。

HTML

 
 
 
 
 
Start
 
      
 
 
 
 
 
End
 
      
 
 
 
  

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

• 在你的jsFiddle中，你引用“bootstrap-datepicker.min.js”而不是“bootstrap-datetimepicker.min.js”。
• 似乎“bootstrap-datepicker.min.js”需要“moment.js”作为先决条件。 请注意，订单包括事项。
• 最后，需要在“bootstrap-datetimepicker.min.js”之后列出“en-gb.js”。

用工作解决方案更新了jsFiddle 。

Answer 2

脚本包含jsFiddle中的顺序不起作用，下面是可行样本的修改顺序。 正如@malkassem所建议的那样，引导日期选择器需要moment.js才能工作。

       ` 

Answer 3

获取日期和/或时间选择器工作的最简单方法是安装在包装下方

 Install-Package Bootstrap.v3.Datetimepicker.CSS 

然后在_Layout中引用已安装的文件

然后在标记之前将下面的脚本添加到布局页面

在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" } })