Bootstrap 日期选择器进入底部

Question

我不是专家Bootstrap 3.我是第一次使用小部件"datepicker"。我有两个日期选择器需要相互显示。当我尝试正常输入时它可以工作，但如果它是日期选择器，它会在底部有点远。我尝试了 position relative 但它没有解决问题。请参阅随附的屏幕截图。Date picker goes at the bottom 希望有人能给我一些启发。下面是我的代码。`

<div class="horiz-search-bar-wrapper">
              <form class="form-inline">
                <div class="form-group">
                  <label><strong>Search</strong></label>
                </div>

                <div class="input-daterange">
                  <div class="form-group rel-position-date">
                    <label>Check-In:</label>
                    <div class="input-group input-append date" id="from">
                      <input type="text" class="form-control">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                  <div class="form-group rel-position-date">
                    <label>Check-Out</label>
                    <div class="input-group input-append date" id="to">
                      <input type="text" class="form-control">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                </div>


                <div class="form-group mar-left">
                  <button type="button" class="btn btn-primary">
                           Submit
                  </button>
                </div>
              </form>
         </div>

`

Answer 1

只是对此进行了更新，我们能够通过将 <label></label> 标签替换为 <span></span> 来解决问题。 bootstrap 日期选择器在看到超过 1 个标签时添加顶部像素。

希望这对其他人有所帮助。

Answer 2

我还发现了日期选择器显示太低的问题。无论目标元素是朝向视口的顶部还是底部，以及 Datepicker 分别将自身定位在元素上方还是下方，我都看到 Datepicker 出现 "too-low."

偶然发现了一些 JavaScript hackery 绑定到 DP 的 "show" event/hook.

的修复

请注意本机 Boostrap CSS 实用程序的使用类 datepicker-orient-top 和 datepicker-orient-bottom。

$('#DateOfBirthForEditing').datepicker().on("show", function (e) {

    var refDatePicker = $('div.datepicker.datepicker-dropdown');
    var refDatePickerField = $('#DateOfBirthForEditing');
    var fieldPositionTop = refDatePickerField.offset().top;

    var dpModalTopOffset = 0;

    if (refDatePicker.hasClass('datepicker-orient-top')) {
        dpModalTopOffset = fieldPositionTop - 255;
    } else if (refDatePicker.hasClass('datepicker-orient-bottom')) {
        dpModalTopOffset = fieldPositionTop + 30;
    }

    refDatePicker.css({ "top": dpModalTopOffset }); 
});

Bootstrap 日期选择器进入底部

Bootstrap Datepicker goes bottom

bootstrap-modal

bootstrap-datepicker