Question

我正在使用boostrap-datepicker-plugin 1.7.1的bootstrap 4（最终版）由于Bootstrap 4不再使用.input-group-addon元素（用于日历图标）但是.input-group-prepend和.input-group-append我以这种方式修改了插件代码

Installation/Chrome

通过这种方式，插件似乎可以很好地处理新的输入组元素，但不幸的是，如果我将css margin添加到包含datepicker输入的容器中，则下拉菜单显示在错误的位置。 / p>

Jsfiddle

我试图找到解决这个问题的方法，但没有成功。有人可以帮我解决这个问题吗？

谢谢

Answer 1

你应该有一个position: relative的容器让插件正确计算位置。

在您的情况下，default container是body，因此您可以设置

body {
  position: relative;
}

或更好，在datepicker初始化中定义一个不同的容器：

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

然后设置相对于.container类

的位置

.container {
  position: relative;
}

FIDDLE here

Answer 2

在javascript中添加容器：

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

这使得datepicker被添加为html DOM中.datepicker_wrapper的子项，而不是添加到您身体的底部。通过这种方式，您可以轻松地按照您希望的方式将其放置在包装器上相对位置，并在拾取器本身上保持绝对位置。

这里的小提琴： https://jsfiddle.net/mh8h7jfe/2/

编辑：更新了2个日期选择器之间的小提琴。

    $( ".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;
}

我现在放入html“datepicker_wrapper”和“datepicker_wrapper2”并在JS中调用这两个类以及将这些类用作容器。

这对我来说很好用

Answer 3

您还可以在标记中添加一个按钮标记＆＃34; btn＆＃34;在课堂上，您不必更改源代码，但可能无法解决您的保证金问题。

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

Boostrap 4和datepicker下拉位置

3 个答案: