Bootstrap-datepicker: Datepicker positioned on the left top corner of the page

Created on 25 Nov 2016 · 7Comments · Source: uxsolutions/bootstrap-datepicker

Extended issue explanation is here: http://stackoverflow.com/questions/40780204/bootstrap-datepicker-positioned-on-the-left-top-corner-of-the-page

Expected behaviour

On click on the input, datepicker should be positioned near the input element.

Actual behaviour

Datepicker positioned on the left top corner of the page

Datepicker version used

Tested with latest stable and v1.7.0-dev.

Example code

Yo can view example page here: https://abonent.pskovregiongaz.ru/Gro/AskForVDGO
Code below was cleared from unneccesary details.

<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 form-control" 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>

is-bug

Source

vasyaabr

👍2

Most helpful comment

@vasyaabr
i have same issue.
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,

MalakhovI on 7 Dec 2016

❤2 👍1

All 7 comments

you could try adding an id to the <div class="form-group"> so it becomes <div class="form-group" id="birthDateContainer"> and then add container: '#birthDateContainer' to the datepicker function so it becomes

$(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 },
          container: '#birthDateContainer'
      });
  });

that should do it... well it did for me anyway.