Twitter引导日期时间选择器未在模式中正确显示 [英] Twitter bootstrap datetime-picker not showing properly in modal

问题描述

我一直在使用带有红宝石的twitter引导程序datetime-picker来显示日历，我也在模式中使用了它，但是它显示为局部的，因为我试图在屏幕底部显示

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;
}

解决方案

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

请不要在您的.JS文件中写标记.

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

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

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

还请从您的浏览器中检查firebug插件，是否正在加载javascript的twitter bootstrap datepicker?

希望它会起作用:)

I have been using twitter bootstrap datetime-picker with ruby on rails for showing the calendar, also I am using this in a modal, but it shows as partial, because I am trying to show at the bottom of the screen

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>

also I have used this additional css

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

解决方案

Please add your Input field id on datepicker.

please do not write tag on your.JS file.

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

Or you can add direct below code on your .html file

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

Please also check from your browser firebug plug-in , twitter bootstrap datepicker javascript loading or not ?

Hope it will works :)

这篇关于Twitter引导日期时间选择器未在模式中正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！