I’m using bootstrap-datepicker
from https://github.com/uxsolutions/bootstrap-datepicker (with twitter-bootstrap 3
). When clicking on the date input
, datepicker popup opens in the top left corner of the page, not near the input
element.
<script type="text/javascript">
$(function() {
$('#BirthDate,#passDate,#docDate').datepicker({
format: "mm.dd.yyyy",
startDate: "-100y",
language: "ru",
orientation: "auto",
autoclose: true,
todayHighlight: true,
toggleActive: true,
defaultViewDate: { year: 2016, month: 1, day: 1 }
});
});
</script>
Example: https://abonent.pskovregiongaz.ru/Gro/AskForVDGO
Tested in: IE, FireFox.
Tested with latest stable and v1.7.0-dev. I have no clue, what else to do.
UPDATE: HTML source.
<!-- language: lang-html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js -->
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<!-- http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js -->
<script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
<!-- Datepicker -->
<link rel="Stylesheet" href="/Content/bootstrap-datepicker3.min.css" />
<script type="text/javascript" src="/Scripts/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datepicker.ru.min.js"></script>
</head>
<body>
<form action="/Gro/AskForVDGO" id="form0" method="post">
<div class="form-group">
<label for="BirthDate">Дата рождения</label>
<input class="text-box single-line" id="BirthDate" name="BirthDate" type="text" value="01.01.0001" />
</div>
<p>
<input type="submit" class="btn btn-success btn-lg btn-block" value="Отправить" title="Отправить" /></p>
</form>
<script type="text/javascript">
$(function() {
$('#BirthDate').datepicker({
format: "mm.dd.yyyy",
startDate: "-100y",
language: "ru",
orientation: "auto",
autoclose: true,
todayHighlight: true,
toggleActive: true,
defaultViewDate: { year: 2016, month: 1, day: 1 }
});
});
</script>
</body></html>
UPDATE 2: @TechBreak answer lead to persistent datapicker (opened on load, didn’t close) element on page. Datapicker persists under input element, and shown permanently. More date input
elements – more datepickers shown at moment.
3
Answers
Found help at GitHub (https://github.com/uxsolutions/bootstrap-datepicker/issues/2079):
It happens because you use:
body{ margin: 0 auto; }
. Current version calculate this margin value wrong. ugly fix for it - in 'bootstrap-datepicker.js' - >place:function(): var left = offset.left - appendOffset.left,
replace it on:
var left = offset.left,
Try this,
Change your orientation from auto to left and apply datepicker on your div instead.
And instead of,
Do this,
Add an ID to the:
so it becomes:
and then add container:
#birthDateContainer
to the datepicker function so it becomes:that should do it.