Boostrap 4和日期选择器下拉框位置

Question

我正在使用Bootstrap 4 (final)与 boostrap-datepicker-plugin 1.7.1。由于Bootstrap 4不再使用.input-group-addon元素（用于日历图标），而是使用.input-group-prepend和.input-group-append，因此我按照以下方式修改了插件代码。

//this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .btn') : false;

this.component = this.element.hasClass('date') ? this.element.find('.input-group-prepend, .input-group-append, .btn') : false;

以这种方式，插件似乎可以很好地与新的input-group元素配合使用，但不幸的是，如果我向包含日期选择器输入的容器添加css边距，则下拉菜单会显示在错误的位置。 Jsfiddle 我试图找到解决此问题的方法，但没有成功。 有人可以帮助我解决这个问题吗？

谢谢

- Paolo Rossi

Answer 1

为了让插件正确计算位置，您需要一个带有position: relative的容器。

在您的情况下，默认容器是body，所以您可以设置：

body {
  position: relative;
}

或者更好地，在日期选择器初始化时定义一个不同的容器：

$( ".date" ).datepicker({
  container: '.container',
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});

然后将位置相对于.container类设置为相对位置

.container {
  position: relative;
}

FIDDLE here

- pumpkinzzz

---

太完美了！谢谢你！ - Paolo Rossi

Answer 2

在你的 JavaScript 中添加一个容器：

  $( ".date" ).datepicker({
container: '.datepicker_wrapper'
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});

这将使日期选择器作为HTML DOM中.datepicker_wrapper的子元素添加，而不是添加在页面底部。这样你就可以使用包装器上的相对定位和选择器本身上的绝对定位轻松地定位它。

这里是fiddle链接： https://jsfiddle.net/mh8h7jfe/2/

编辑：更新���fiddle以区分两个日期选择器。

    $( ".datepicker_wrapper" ).datepicker({
container: '.datepicker_wrapper',
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});
$( ".datepicker_wrapper2" ).datepicker({
container: '.datepicker_wrapper',
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});

还有css：

.datepicker_wrapper, .datepicker_wrapper2{
position:relative;
}

我现在将"datepicker_wrapper"和"datepicker_wrapper2"放入HTML中，并在JS中调用这两个类，同时使用这些类作为容器。

对我来说，这很有效。

- Marcel Schmid

---

很遗憾，您的示例没有按照预期工作。 - Paolo Rossi

什么？为什么？对我来说，在fiddle中，日期选择器完美地在输入框下方打开了。你能解释一下哪里出了问题吗？或者fiddle有什么问题吗？你可能忘记在CSS中加上“.datepicker_wrapper{position:relative;}”了？ - Marcel Schmid

使用 Firefox 和 Chrome（在你的 fiddle 中），如果我点击第一个输入框中的 input-group-append，下拉菜单会显示在第二个 datapicker 输入框中... 此外，如果我直接点击输入框，则下拉菜单仍然保持打开状态。但是，这对你有效吗？ - Paolo Rossi

更新了我的代码片段并进行了解释。你是对的，我没有区分这两个输入，并且它们都具有相同的类，因此出现了这个错误。对我来说，这个代码片段现在可以正常工作。 - Marcel Schmid

现在是可以的，但@pumpkinzzz的解决方案更清晰。谢谢。 - Paolo Rossi

实际上，它完全相同，我甚至认为我的解决方案更可靠，因为我将两个输入分别放在它们的类中，所以不会出现选择正确输入的问题 ;) - Marcel Schmid

Answer 3

你也可以在标记中包含一个带有“btn”类的按钮标签，这样就不必更改源代码，但可能无法解决您的边距问题。

<div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button type="button" class="btn btn-info"><span class="fa fa-calendar"></span></button>
    </div>
</div>

- BusyBee