2014-04-03 98 views
9

我一直在寻找这个为期2天,无法弄清楚我做错了什么。Bootstrap-Datetimepicker不能正常工作

这是我的项目的小提琴。 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的新手,所以我不确定自己做错了什么。

噢。我使用长名称做到这一点进入一个joomla网站,也使用moo工具。

在此先感谢。

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> 

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

但是,当我将它合并到常规页面时,它会中断。不知道我在搞什么。

在此先感谢。

回答

10

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

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

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

  • 在你的jsfiddle,您引用“自举datepicker.m in.js“而不是”bootstrap-datetimepicker.min.js“。
  • 似乎“bootstrap-datepicker.min.js”需要“moment.js”作为先决条件。请注意,包括事项的顺序。
  • 最后,“en-gb.js”需要在“bootstrap-datetimepicker.min.js”之后列出。

更新jsFiddle与工作解决方案。

+0

你是怎么改变?在外部。我看到你在jQuery中添加了格式。这就是全部? – dagger2002

+0

我使用了您所拥有的不同网址。相同的文件名,但不同的网址。 – malkassem

+0

感谢您的帮助。我只是意识到你已经将它从bootstrap 3.1改为bootstrap 2.2。这不会工作,因为我的网站正在使用bootstrap 3.我使用的时间脚本版本与bootstrap 3. – dagger2002

5

脚本包括在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>` 
0
获取日期和/或时间选择器工作

最简单的方法是通过安装下面的包

Install-Package Bootstrap.v3.Datetimepicker.CSS 

,然后引用文件安装在_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> 

,然后添加</body>标签

<script> 
jQuery(document).ready(function() { 

    jQuery('.datepicker').datetimepicker({ format: 'DD/MM/YYYY' }); 
    jQuery('.datetimepicker').datetimepicker(); 

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