如何更改Bootstrap日期选择器弹出窗口的位置？

Question

我正在使用引导日期选择器（https://bootstrap-datepicker.readthedocs.io/en/latest/options.html），并且一切正常，除了日期选择器弹出窗口显示在顶部而不是底部。我检查了多个答案，但都无济于事。

这是我的HTML：

<div class="input-group date" data-provide="datepicker">
  <input id="dateAssigned" name="dateAssigned" type="text" class="form-control mb-4 mt-1" placeholder="mm/dd/yyyy">
  <div class="input-group-addon"></div>
</div>

这里是JS。我尝试了WidgetPositioning：

    <script>
        $('#dateAssigned').datepicker({
            widgetPositioning: {
                horizontal: 'left',
                vertical: 'bottom'
            }
        });
    </script>

也以这种线程定向（Bootstrap DatePicker Position），但也不起作用：

    <script>
        $('#dateAssigned').datepicker({
            orientation: "bottom"
        });
    </script>

关于如何使小插图出现在底部的任何提示？谢谢。

Answer 1

Bootstrap DatePicker defaults到底部；您不需要任何其他规则即可显示在此处。 orientation确实是调整弹出窗口出现位置的方法，尽管很可能是错误地加载/引用DatePicker及其所需组件的问题。

请确保依次加载jQuery，Popper，Bootstrap和Bootstrap的DatePicker的JavaScript。确保先加载CSS的Bootstrap，然后依次加载Bootstrap的DatePicker。

这里是一个例子，表明：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>

<div class="input-group date" data-provide="datepicker">
  <input id="dateAssigned" name="dateAssigned" type="text" class="form-control mb-4 mt-1" placeholder="mm/dd/yyyy">
  <div class="input-group-addon"></div>
</div>

Answer 2

如果您可以共享整个HTML代码，或者至少共享和之间的所有内容，那将很好。这样我们就可以检查您正在加载的脚本和样式。

我99％的确定您没有为日期选择器正确加载Bootstrap CSS。

您可以直接从Git存储库中获取它：https://github.com/uxsolutions/bootstrap-datepicker] 1

或来自CDN：https://cdnjs.com/libraries/bootstrap-datepicker