twitter-bootstrap 引导模式对话框中的时间选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26006055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
time-picker in bootstrap modal dialog
提问by edbert
I am trying to implement a time-picker in a boostrap modal dialog. However when I open the dialog the time-picker still looks like a normal text field which makes me believe that this jquery code is not running:
我正在尝试在 boostrap 模式对话框中实现一个时间选择器。但是，当我打开对话框时，时间选择器仍然看起来像一个普通的文本字段，这让我相信这个 jquery 代码没有运行：
$('#timepicker1').timepicker(); // shown below
However I am able to get the time-picker to display using very similar code on a normal webpage. The problem seems specific to displaying it in a modal dialog.
但是，我能够在普通网页上使用非常相似的代码来显示时间选择器。该问题似乎特定于在模式对话框中显示它。
Here is a link to the time-picker that I am using:
这是我正在使用的时间选择器的链接：
http://jdewit.github.io/bootstrap-timepicker/
http://jdewit.github.io/bootstrap-timepicker/
Here is my modal dialog:
这是我的模态对话框：
<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">close</button>
<h4 class="modal-title" id="myModalLabel">New Event</h4>
</div>
<div class="modal-body">
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here is my script that is suppose to initialize the time-picker
这是我的脚本，假设初始化时间选择器
$( document ).ready(function() {
//$('#table').editableTableWidget();
$( "#btn-new-event" ).click(function() {
$('#dialog').modal('show');
$('#timepicker1').timepicker(); // not running properly
});
});
Any help would be greatly appreciated!
任何帮助将不胜感激！
回答by loger9
For me, I had to do this to make it work:
对我来说，我必须这样做才能使它工作：
.bootstrap-timepicker-widget.dropdown-menu {
z-index: 99999!important;
}
and of course, remove:
当然，删除：
template: 'modal'
回答by Academia
ibrahimyilmazgave you the right answer, exactly as shown on the bootstrap timepicker official site.
ibrahimyilmaz给了你正确的答案，正如bootstrap timepicker 官方网站上显示的那样。
The only thing that maybe serves as a more precise indication here is that timepicker only works with bootstrap v2.x.
这里唯一可以作为更精确指示的事情是 timepicker 仅适用于 bootstrap v2.x。
If you want to use bootstrap 3.x, you have to read the migration docand perform the required changes. If you need help on that, just give me a sign :) Or use timepicker bootstrap3wich is a fork of the one you have used.
如果您想使用 bootstrap 3.x，您必须阅读迁移文档并执行所需的更改。如果您在这方面需要帮助，请给我一个标志:) 或者使用timepicker bootstrap3，它是您使用过的那个的一个分支。
Check this link exampleto see a working example. Check on the +view Sourcelink to see all the required scripts and links.
检查此链接示例以查看工作示例。检查+view Source链接以查看所有必需的脚本和链接。
Hope it's useful!
希望有用！
回答by ibrahimyilmaz
$('#timepicker1').timepicker({
template: 'modal'
});
回答by RayLoveless
It's a reported bug https://github.com/jdewit/bootstrap-timepicker/issues/326
这是一个报告的错误https://github.com/jdewit/bootstrap-timepicker/issues/326
you have to change the z-order as mentioned by @eugene1832:
您必须更改@eugene1832 提到的 z 顺序：
.bootstrap-timepicker-widget.dropdown-menu {
z-index: 1050!important;
}
ANDyou also need to remove the initialization option:
而且您还需要删除初始化选项：
template: 'modal'
回答by Udara
Add this code for line #666 in bootstrap-timepicker.jsfile. It's work for me
在bootstrap-timepicker.js文件中为第 666 行添加此代码。这对我有用
var index_highest = 0;
$(".modal").each(function() {
// always use a radix when using parseInt
var index_current = parseInt($(this).css("zIndex"), 10);
if (index_current > index_highest) {
index_highest = index_current;
}
});
var zIndex = parseInt(this.$element.parents().filter(function() { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + index_highest;
回答by artis3n
To update the answers to this question: bootstrap-timepickernow supports Bootstrap 3, but this issue with modals is a known bug.
更新这个问题的答案：bootstrap-timepicker现在支持 Bootstrap 3，但模态的这个问题是一个已知的错误。
The bug is still open at this time, but one user suggested adding this piece of code to your css file to make the timepicker visible:
该错误此时仍处于打开状态，但一位用户建议将这段代码添加到您的 css 文件中，以使 timepicker 可见：
.bootstrap-timepicker-widget.dropdown-menu {
z-index: 1050!important;
}
I would note that this solution did not work for me, but it is currently listed as a possible solution. I'll try to update this response when the issue is either resolved on Github or when someone suggests another method.
我会注意到这个解决方案对我不起作用，但它目前被列为可能的解决方案。当问题在 Github 上得到解决或有人提出另一种方法时，我会尝试更新此回复。
