Question

我搜索了几个小时但没有结果。我在下拉列表中使用Angular Date Range Picker。我怎样才能让它在特定的地方呈现而不是覆盖它下面的内容？这是jsfiddle
和代码：

<input type="text" name="dateofbirth" id="dateofbirth" placeholder="Date of Birth"/>

$(function () {
    $("#dateofbirth").datepicker();
});

Answer 1

您需要调整CSS以便框展开，但这对我有用。找到日历底部的位置，然后将该值应用于bottom的CSS属性。

<span style="display:none;">
    <div id="mybox">
        <br/> <br/> 
        <input type="text" name="dateofbirth" id="dateofbirth" placeholder="Date of Birth"/>
        <p class="textbox">
        I want this text to be pushed down when datepicker opens
        </p>
        <br/> <br/> <br/> <br/>
   </div>
</span>

$(function () {
    $("#dateofbirth").datepicker();
    $("#dateofbirth").on('click', function(){

        var $this = $(this);
      var calendarbtm =  $("#ui-datepicker-div").position().top + $this.outerHeight(true);

      $('.textbox').css({'top': calendarbtm});

    })
});

.textbox {
  position: absolute;
}

在div中渲染datepicker

1 个答案: