У меня есть кнопка на странице, которая вызывает модальный, имеющий datepicker.
Если эта кнопка находится наверху (мне не нужно прокручивать страницу до щелчка), модальный открывается, а датапикер отображается правильно.
Но если эта кнопка ниже на странице (так что мне нужно прокручивать страницу, чтобы щелкнуть), модальный открывается, а datepicker отображается некорректно. (НЕ УВЕРЕН, если прокрутка имеет отношение)
Здесь jsfiddle
Здесь проблема отображения изображения, datepicker должна отображаться выше как всплывающая подсказка, но она опускается:
Здесь код:
<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 -->
ИЗМЕНИТЬ Всплывающая подсказка datetimepicker сдвигается на величину, с которой я просматриваю страницу, прежде чем нажимать кнопку "Контакт", чтобы отобразить модальный файл, содержащий datetimepicker.
Я столкнулся с этой проблемой. Я смог решить это, добавив атрибут контейнера в div.
$('#myDatePicker').datepicker({
container:'#myModalId'
});
или если вы используете метод "ленивой загрузки", как я:
<input id='myDatePicker' data-provide='datepicker' data-date-container='#myModalId'>
Ссылка: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html
Надеюсь, что это поможет кому-то еще!
Datetimepicker будет отображаться в неправильном месте, если контейнер ввода не расположен относительно.
Решение:
<div style="position:relative">
<div class='input-group date' id='datetimepicker1'>
</div>
У меня была такая же проблема при использовании его с Bootstrap 4.1.1. Всплывающее окно DatePicker появилось в верхней части элемента ввода.
Я исправил это с помощью этого CSS:
/* fix bootstrap-datepicker positional bug */
.datepicker {
transform: translate(0, 3.1em);
}
В моем случае позиция datepicker была на 60 пикселей выше, чем следовало бы, потому что у одного из ее родителей div было:
margin-top: 60px;
вместо
padding-top: 60px;
Для меня ниже решение работает
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'
});
Для меня это и связанные с этим проблемы оказались из-за того, что я открыл окно инспектора кода. У обычных пользователей это не должно быть, поэтому, если это ваш случай, это не проблема.
Это решение отлично сработало для меня, чтобы отобразить средство выбора даты поверх модального загрузчика.
http://jsfiddle.net/cmpgtuwy/654/
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
$('#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
.wrapper {
height: 100px;
overflow: auto;}
body {
position: relative;
}
введите описание изображения здесь
date-piker скрывается из-за переполнения таблицы. Сейчас я использую https://www.npmjs.com/package/ng2-datepicker угловой дата-пикер. Я хочу показать дату всплывающего окна. Понравилось это изображение. Пожалуйста, помогите мне, как установить всплывающее окно даты пикера без переполнения. https://i.stack.imgur.com/bKR3C.png
Заранее спасибо. Хорошего дня