skip to Main Content

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.

enter image description here

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.
enter image description here

3

Answers


  1. Chosen as BEST ANSWER

    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,


  2. Try this,

    Change your orientation from auto to left and apply datepicker on your div instead.

    <script type="text/javascript">
      $(function() {
          $('#datepickerEl').datepicker({
              format: "mm.dd.yyyy",
              startDate: "-100y",
              language: "ru",
              orientation: "left",
              autoclose: true,
              todayHighlight: true,
              toggleActive: true,
              defaultViewDate: { year: 2016, month: 1, day: 1 }
          });
      });
    </script>
    

    And instead of,

    <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>
    

    Do this,

    <div class="form-group" id="datepickerEl">
        <label for="BirthDate">Дата рождения</label>
        <input class="text-box single-line" id="BirthDate" name="BirthDate" type="text" value="01.01.0001" />
    </div>
    
    Login or Signup to reply.
  3. Add 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search