Bootstrap Datepicker弹出后底部被屏幕截断该如何解决？

点击datepicker输入框时，视口会如预期向下滚动以显示日历，但日历视图会从滚动前视口所处的位置开始被截断。调整z-index为任意大的正负值都没有效果。

相关代码 #

HTML #

<div class="form-group has-feedback col-xs-12 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4 has-feedback-left">
  <div id="specificday" class="specificday">
      <label for="specificdate" style="font-size: 13px;">选择日期：</label>
        <div class="input-group date specificdate">
          <input type="text" id="ebaySpecificDate" name="ebaySpecificDate" class="form-control" onkeydown="return false" onchange="return specificDateChanged()" readonly="true"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
      </div>
    </div>
</div>

JS #

$('.input-group.date.specificdate').datepicker({
      format: "dd/mm/yyyy",
      maxViewMode: 1,
      todayBtn: "linked",
      autoclose: true,
      startDate: new Date(),
      todayHighlight: true
}).on('show', function(e){
      $('.datepicker').css("top", $('#ebaySpecificDate').offset().top+35);
      $('.datepicker').css("z-index", 1151);
});

该问题的核心原因是你在show事件中手动强制设置了datepicker的top值，使用的offset().top是相对于整个文档的固定坐标，没有考虑页面滚动带来的视口位置变化，导致日历定位在滚动前的位置，超出视口的部分就被截断，该问题和z-index无关。你可以按以下方案修改：

• 删掉show事件中手动设置top的代码，datepicker自带的定位逻辑会自动根据输入框的实时位置计算日历的展示位置，不需要手动干预
• 如果需要调整日历和输入框的间距，可以使用datepicker自带的orientation参数配置定位方向，或者给.datepicker类添加CSS的margin-top属性，不要直接写死top值
• 额外确认datepicker的所有父级容器没有设置overflow: hidden属性，该属性也会导致子元素超出部分被截断

修改后的JS代码参考：

$('.input-group.date.specificdate').datepicker({
      format: "dd/mm/yyyy",
      maxViewMode: 1,
      todayBtn: "linked",
      autoclose: true,
      startDate: new Date(),
      todayHighlight: true,
      orientation: "bottom auto" // 优先在输入框下方展示，位置不足时自动调整方向
}).on('show', function(e){
      $('.datepicker').css("z-index", 1151); // z-index配置可保留
});

内容的提问来源于stack exchange，提问作者Scoop