Bootstrap 4 和 datepicker 下拉位置

Posted 2023-05-08

【中文标题】Bootstrap 4 和 datepicker 下拉位置

【英文标题】：Boostrap 4 and datepicker dropdown position

【发布时间】：2018-07-03 08:58:00

【问题描述】：

我正在使用 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;

通过这种方式，插件似乎可以很好地与新的输入组元素配合使用，但不幸的是，如果我将 css 边距添加到包含日期选择器输入的容器中，下拉菜单会显示在错误的位置。

Jsfiddle

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

谢谢

【参考方案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

【讨论】：

完美！谢谢！

【参考方案2】：

在您的 javascript 中添加一个容器：

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

这使得日期选择器作为 .datepicker_wrapper 的子元素添加到您的 html DOM 中，而不是添加到正文的底部。通过这种方式，您可以轻松地将其定位到您想要的位置，在包装器上使用相对位置，在选择器本身上使用绝对位置。

这里是小提琴： 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 中调用这两个类以及将这些类用作容器。

这对我来说很好用

【讨论】：

很遗憾，您的示例无法正常工作。

什么？为什么？对我来说，日期选择器在小提琴的输入下方完美打开？你能解释什么不起作用吗？或者小提琴有什么问题？您可能忘记了 CSS 中的“.datepicker_wrapperposition:relative;”？

如果我点击第一个（input-group-append）在第二个datapicker输入上显示的下拉菜单，使用firefox和chrome（在你的小提琴中）。此外，如果我直接点击输入字段下拉菜单保持打开状态。但它对你有用吗？？？

更新了我的小提琴并解释了它。你是对的，我没有区分 2 个输入并且都具有相同的类，所以出现了这个错误。对我来说，这个很好用

现在没问题，但@pumpkinzzz 解决方案更干净。谢谢

【参考方案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>