Javascript Bootstrap Datepicker 出现在模态中的错误位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27966645/
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
Bootstrap Datepicker appearing at incorrect location in a modal
提问by Insane Coder
I have a button on a page that calls a modal having datepicker.
我在页面上有一个按钮，调用具有日期选择器的模式。
If this button is at top (I don't have to scroll page to click), modal opens and datepicker displays correctly.
如果此按钮位于顶部（我不必滚动页面来单击），则会打开模态并正确显示日期选择器。
But if this button is lower on the page( so that I have to scroll page to click), modal opens and datepicker displays incorrect. (NOT SURE if scrolling has a relation)
但是，如果此按钮位于页面下方（因此我必须滚动页面才能单击），则会打开模态并且日期选择器显示不正确。（不确定滚动是否有关系）
Here's the jsfiddle
这是jsfiddle
Here's the image displaying problem, the datepicker should display above as a tooltip, but it goes down :
这是图像显示问题，日期选择器应该在上面显示为工具提示，但它会下降：
Here's the code :
这是代码：
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#callModal">Contact</button>
<div class="modal fade" id="callModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="contact">Contact</label>
<input type="text" class="form-control" id="contact" placeholder="Your mobile number">
</div>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label for="cal">Date & Time</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" id="cal"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Contact </button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
EDITThe datetimepicker tooltip is shifted by the amount by which I scroll the page before clicking the button "Contact" to appear the modal containing the datetimepicker.
编辑datetimepicker 工具提示按我在单击“联系”按钮以显示包含 datetimepicker 的模式之前滚动页面的数量移动。
回答by tjfo
I just ran into this same issue. I was able to solve it by adding a container attribute to the div.
我刚刚遇到了同样的问题。我能够通过向 div 添加容器属性来解决它。
$('#myDatePicker').datepicker({
container:'#myModalId'
});
or if you are using the "lazy load" method as I was:
或者，如果您像我一样使用“延迟加载”方法：
<input id='myDatePicker' data-provide='datepicker' data-date-container='#myModalId'>
Reference : http://bootstrap-datepicker.readthedocs.org/en/latest/options.html
参考：http: //bootstrap-datepicker.readthedocs.org/en/latest/options.html
Hope it helps someone else!
希望它可以帮助别人！
回答by Shadi Namrouti
Datetimepicker will show in a wrong place if the container of the input is not positioned relative.
如果输入的容器未相对定位，则 Datetimepicker 将显示在错误的位置。
The solution is:
解决办法是：
<div style="position:relative">
<div class='input-group date' id='datetimepicker1'>
</div>
回答by Diogo Capela
I had the same problem when using it with Bootstrap 4.1.1. The datepicker popover was appeareing on to the top of the input element.
在 Bootstrap 4.1.1 中使用它时我遇到了同样的问题。日期选择器弹出框出现在输入元素的顶部。
I fixed it using this CSS:
我使用这个 CSS 修复了它：
/* fix bootstrap-datepicker positional bug */
.datepicker {
transform: translate(0, 3.1em);
}
回答by Stéphane Bruckert
In my case the position of the datepicker was 60px higher than it should have been, because one of its divparents had:
在我的例子中，日期选择器的位置比它应该的位置高 60px，因为它的一个div父级有：
margin-top: 60px;
margin-top: 60px;
instead of
代替
padding-top: 60px;
回答by AVANI PATEL
For me below solution is working
对我来说，下面的解决方案是有效的
var datepicker = sandbox.dom('body').find('.bootstrap-datetimepicker-widget:last'),
position = datepicker.offset();
// Move datepicker to the exact same place it was but attached to the body
datepicker.appendTo('body');
datepicker.css({
position: 'absolute',
top: position.top,
bottom: 'auto',
left: position.left,
right: 'auto'
});
回答by Marcel
For me, this and related issues turned out to be because I had the code inspector window open. Regular users shouldn't have this on, so if that's your case it's a non issue.
对我来说，这个和相关问题原来是因为我打开了代码检查器窗口。普通用户不应该有这个，所以如果这是你的情况，这不是问题。
回答by Adnan Boota
This solutions worked perfectly for me to render the datepicker on top of bootstrap modal.
这个解决方案非常适合我在引导模式之上渲染日期选择器。
http://jsfiddle.net/cmpgtuwy/654/
http://jsfiddle.net/cmpgtuwy/654/
HTML
HTML
<br/>
<div class="wrapper">
Some content goes here<br />
Some more content.
<div class="row">
<div class="col-xs-4">
<!-- padding for jsfiddle -->
<div class="input-group date" id="dtp">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>
Javascript
Javascript
$('#dtp').datetimepicker({
format: 'MMM D, YYYY',
widgetParent: 'body'});
$('#dtp').on('dp.show', function() {
var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
if (datepicker.hasClass('bottom')) {
var top = $(this).offset().top + $(this).outerHeight();
var left = $(this).offset().left;
datepicker.css({
'top': top + 'px',
'bottom': 'auto',
'left': left + 'px'
});
}
else if (datepicker.hasClass('top')) {
var top = $(this).offset().top - datepicker.outerHeight();
var left = $(this).offset().left;
datepicker.css({
'top': top + 'px',
'bottom': 'auto',
'left': left + 'px'
});
}
});
CSS
CSS
.wrapper {
height: 100px;
overflow: auto;}
body {
position: relative;
}
