Render Datepicker in div

Question

Ich habe für einige Stunden gesucht, aber ohne Ergebnis. Ich benutze Angular Date Range Picker im Dropdown. Wie kann ich es an einem bestimmten Ort rendern, anstatt zu verdecken, was darunter ist? Hier ist jsfiddle
Und Code:

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

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

Answer 1

Sie müssen die CSS anpassen, so dass die Box erweitert, aber das funktionierte für mich. Suchen Sie die Position des unteren Rands des Kalenders und wenden Sie dann den Wert auf die CSS-Eigenschaft bottom an.

<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; 
}