Twitter bootstrap datetime-picker在模态中没有正确显示

时间:2014-12-03 05:36:55

标签: javascript jquery css ruby-on-rails twitter-bootstrap

我一直在使用Twitter引导日期时间选择器和轨道上的红宝石来显示日历,我也在模态中使用它,但它显示为部分,因为我试图在屏幕的底部显示

HTML

 <div id="datetimePicker" class="input-append date">
     <input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="testdate"></input>
     <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
 </div>

JS

<script>
 $(document).ready(function(){
   $('#datetimePicker').datetimepicker(); 
 });
</script>

我也使用了这个额外的css

.bootstrap-datetimepicker-widget {
 z-index:99999 !important;
}

1 个答案:

答案 0 :(得分:0)

请在datepicker上添加输入字段ID。

请不要在your.JS文件上写标记。

$(function() {
     "use strict";
     $(document).ready(function(){
       $('#testdate').datetimepicker(); 
     });
   });

或者您可以在.html文件中直接添加以下代码

<script>
 $(document).ready(function(){
   $('#testdate').datetimepicker(); 
 });
</script>

还请检查您的浏览器firebug插件,twitter bootstrap datepicker javascript加载与否?

希望它能起作用:)