使用JQuery控制datepicker日历边距的日期字段

Question

我正在使用Bootstrap Datepicker插件，我注意到下拉列表的日期选择器日历'箭头与日期字段重叠至少3个像素。见下图。我想给主日历容器（包含日历的下拉列表和css伪类::after的箭头）a margin-top:5px;但是没有雪茄。基本上是因为javascript会覆盖它。我在文档中查找了任何后备选项，没有类似的东西。所以我假设我需要一个自定义jQuery来操作DOM中的日历，并将top:##px更正为 - + 5px，具体取决于是打开顶部还是底部。

修改 我还尝试覆盖top:##px;并给它一个额外的5px和!important以便它实际覆盖它，但问题是必须根据位置在DOM处理顶部定位除了datepicker字段控制之外，所有日期选择器都将显示在同一位置。

此图像显示输出

可以找到Bootstrap DatePicker文档here

我的代码看起来像这样：

<div class="form-group">
    <label class="control-label">Date Of Birth</label>
    <div class="input-group date" id="datepicker" data-date-format="dd-mm-yyyy">
         <input type="text" class="form-control">
         <span class="input-group-addon">
             <i class="fa ion-calendar"></i>
         </span>
    </div>
</div>

$('.date').datepicker({
    todayHighlight: true,
    autoclose: true
});

很简单。

以下是检查员的图像，您可以看到JS添加的位置最高值。

关于如何降低吸吮的想法？

这是CODEPEN我的问题

Answer 1

  

您initializing datepicker超过<div class="input-group date" id="datepicker"元素而不是input元素。

$('.date').datepicker({
  todayHighlight: true,
  autoclose: true
});

<div class="form-group">
  <label class="control-label">Date Of Birth</label>
  <div class="input-group" id="datepicker" data-date-format="dd-mm-yyyy">
    <!-- _______________^^ Remove class `date` from here -->
    <input type="text" class="form-control date">
    <!-- ____________________^^ Add class `date`here -->
    <span class="input-group-addon">
             <i class="fa ion-calendar"></i>
         </span>
  </div>
</div>

Fiddle here