Bootstrap Datetimepicker模式日历位置附加不起作用答案

【问题标题】：Bootstrap Datetimepicker modal calendar position append not workingBootstrap Datetimepicker模式日历位置附加不起作用
【发布时间】：2021-03-25 00:23:10
【问题描述】：

我希望日期选择器应该在输入框附近可见。我试过容器位置。但仍然无法正常工作。

<div class="input-group  date">
    <input type="text" name="dates" class="form-control daterange" value=""/>              
</div>
<div id="CalModal"></div>
$('.daterange').daterangepicker({                    
        "locale": {
            "container": "#CalModal",
    }
});

【问题讨论】：

你能创建一个与你的页面相同的完整的工作 sn-p 吗？

标签： javascript html jquery twitter-bootstrap-3 datepicker

【解决方案1】：

默认情况下，组件看起来像预期的那样工作。尽管我确实认为您的代码中的某些内容导致了此问题。我能够重现一个类似的问题，即日期选择器下降到它应该在的位置以下。看看这个屏幕截图。我禁用了日期选择器上的 top 属性，然后它下降了大约 40 像素。在您的代码中查找覆盖顶部属性的内容。

【讨论】：

【解决方案2】：

似乎按预期工作！

$('.daterange').daterangepicker({
  "opens": "left",
  "locale": {
    "container": "#CalModal",
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<table class="table table-bordered">
  <tr>
    <th>Search</th>
    <th>
      <input class="form-control" />
    </th>
    <th>
      <input class="form-control" />
    </th>
    <th>
      <div class="input-group date">
        <input type="text" name="dates" class="form-control daterange" value="" />
      </div>
      <div id="CalModal"></div>
    </th>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

【讨论】：

你认为它绑定到CalModal id吗？
库文档中的@Saravana 没有这样的属性。