बूटस्ट्रैप डेटपिकर एक मोडल

Question

में गलत स्थान पर दिखाई दे रहा है मेरे पास एक ऐसे पृष्ठ पर एक बटन है जो डेटलर वाले मोडल को कॉल करता है।

यदि यह बटन शीर्ष पर है (मुझे क्लिक करने के लिए पृष्ठ स्क्रॉल करने की आवश्यकता नहीं है), मोडल खुलता है और डेटपिकर सही तरीके से प्रदर्शित होता है।

लेकिन यदि यह पृष्ठ पृष्ठ पर कम है (इसलिए मुझे क्लिक करने के लिए पृष्ठ स्क्रॉल करना होगा), मोडल खुलता है और डेटपिकर गलत प्रदर्शित करता है। (यदि स्क्रॉल एक रिश्ता है निश्चित नहीं)

यहाँ jsfiddle

यहाँ छवि प्रदर्शित समस्या, datepicker टूलटिप के रूप में ऊपर प्रदर्शित करना चाहिए है, लेकिन यह नीचे चला जाता है:

कोड यह :

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#callModal">Contact</button> 

<div class="modal fade" id="callModal"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <form role="form"> 
       <div class="form-group"> 
        <label for="name">Name</label> 
        <input type="text" class="form-control" id="name" placeholder="Enter name"> 
       </div> 
       <div class="form-group"> 
        <label for="contact">Contact</label> 
        <input type="text" class="form-control" id="contact" placeholder="Your mobile number"> 
       </div> 
       <div class="row"> 
        <div class='col-sm-6'> 
        <div class="form-group"> 
         <label for="cal">Date &amp; Time</label> 
         <div class='input-group date' id='datetimepicker1'> 
         <input type='text' class="form-control" id="cal"/> 
         <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
        </div> 
        <script type="text/javascript"> 
       $(function() { 
        $('#datetimepicker1').datetimepicker(); 
       }); 
       </script> 
       </div> 
       </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-danger">Contact </button> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

संपादित DateTimePicker उपकरण टिप को उस राशि से स्थानांतरित किया जाता है, जिसके द्वारा मैं "संपर्क" बटन पर क्लिक करने से पहले पृष्ठ को स्क्रॉल करता हूं जिसमें डेटाेटिमिकर युक्त मोडल दिखाई देता है।

Answer 1

मैं बस इसी मुद्दे में भाग गया। मैं div में एक कंटेनर विशेषता जोड़कर इसे हल करने में सक्षम था।

$('#myDatePicker').datepicker({ 
    container:'#myModalId' 
}); 

या आप "आलसी लोड" विधि प्रयोग कर रहे हैं के रूप में मैं था:

<input id='myDatePicker' data-provide='datepicker' data-date-container='#myModalId'> 

संदर्भ: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

आशा है कि यह किसी और मदद करता है!

Answer 2

मेरे लिए, यह और संबंधित मुद्दे सामने आए क्योंकि मेरे पास कोड इंस्पेक्टर विंडो खुल गई थी। नियमित उपयोगकर्ताओं के पास यह नहीं होना चाहिए, इसलिए यदि आपका मामला यह एक मुद्दा है।

Answer 3

इनपुट के कंटेनर को सापेक्ष स्थान पर नहीं रखा गया है तो डेटाटिमेकर एक गलत जगह पर दिखाएगा।

समाधान है:

<div style="position:relative"> 
<div class='input-group date' id='datetimepicker1'> 
</div> 

Answer 4

मेरे मामले में datepicker की स्थिति 60px से अधिक यह किया जाना चाहिए था था, क्योंकि इसके div माता-पिता में से एक था:

margin-top: 60px;

padding-top: 60px; 

012 के बजाय