Question

我不是Bootstrap 3的专家。这是我第一次使用小工具“datepicker”。我有两个日期选择器需要彼此内联显示。当我尝试正常输入时它可以正常工作，但如果它是一个日期选择器，它会在底部稍微远一点。我尝试了相对位置，但它没有解决问题。请参阅随附的屏幕截图。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>来解决问题。引导日期选择器在看到超过1个标签时会添加顶部像素。

希望这可以帮助其他人。

Answer 2

我也看到Datepicker的问题显得太低了。无论目标元素是朝向视口的顶部还是底部，而Datepicker分别将其自身定位在元素的上方或下方，我看到一个Datepicker显得“太低”。

偶然发现修复了一些绑定到DP的“show”事件/钩子的JavaScript hackery。

请注意使用本机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 Datepicker走到了尽头

2 个答案: