渲染日期選擇器div

我搜索了幾個小時但沒有結果。我在下拉菜單中使用Angular Date Range Picker。我怎樣才能讓它在特定的地方渲染，而不是掩蓋它下面的內容？這裏是jsfiddle
和代碼：渲染日期選擇器div

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

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

來源

2017-05-18 standy

你看這個http://api.jqueryui.com/datepicker/#method-dialog @pos？ – Edwin

我應該如何使用它與https://github.com/fragaria/angular-daterangepicker？ – standy

你的例子與角度日期範圍選取器無關，加上我不明白你想要什麼。你問如何呈現datepicker，而不是daterangePicker。 – Edwin

您需要將箱擴展，但是這個工作對我來說，調整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; 
}

來源

2017-05-18 14:09:57

謝謝。這是一個進步。但不完全是我想要實現的，因爲日期選擇器不在下拉列表中。有沒有辦法讓datepicker完全在這個下拉菜單中？在這個jsfiddle例子中，滾動條應該出現在下拉列表中。 – standy

不在下拉菜單中？ –

看看這個：http://jsfiddle.net/djdbgznd/文本被推下來，但日期選擇器仍然不在下拉列表中。當您向下滾動時，它將從下拉菜單開始，向上滾動時會在下拉菜單下結束。我希望它是完整的下拉菜單。 – standy

渲染日期選擇器div

回答

相關問題