代码之家 › 专栏 › 技术社区 › Olahzzz

引导日期选择器位于底部

bootstrap-datepicker bootstrap-modal

Olahzzz · 技术社区 · 7 年前

我不是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>

2 回复 | 直到 7 年前

Olahzzz 7 年前

这只是一个更新,我们可以通过替换 <label></label> <span></span>

fusion27 7 年前

我还发现Datepicker看起来太低了。无论目标元素是朝向视口的顶部还是底部,并且日期选取器分别在元素的上方或下方定向,我都看到日期选取器看起来“太低”

偶然发现了一个补丁,其中一些JavaScript黑客绑定到DP的“show”事件/挂钩。

注意本机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 }); 
});