Bootstrap Datepicker出現在模式不正確的位置

我有一個頁面上的按鈕調用具有日期選擇器的模式。Bootstrap Datepicker出現在模式不正確的位置

如果此按鈕位於頂部（我不必滾動頁面進行單擊），模式將打開並且datepicker正確顯示。

但是，如果此按鈕在頁面上較低（這樣我必須滾動頁面進行單擊），模式將打開並且datepicker顯示不正確。（如果滾動有關係，不知道）

這裏的圖像顯示問題，日期選擇器應該上方顯示一個提示，但它的股價下跌： enter image description here

下面的代碼：

<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工具在點擊「聯繫人」按鈕之前，我會滾動頁面的數量，以顯示包含datetimepicker的模式。

來源

2015-01-15 Insane Coder

我不會說「錯誤」的位置，因爲這是datetimepicker的預期行爲，但是你想要它在上面，而不是在下面，對嗎？目前，我不認爲'orientation'有一個選項，就像'datepicker'插件一樣。 – 2015-01-15 15:28:03

@TimLewis：這不是下面。它的偏離位置，否則就會有一個帶有日期選擇框的箭頭，就像工具提示一樣。 – 2015-01-15 15:42:45

嗯...好吧，我似乎無法讓你的小提琴工作... 2控制檯錯誤：'時刻沒有定義'和'$（...）。datetimepicker（）不是一個函數。 – 2015-01-15 15:51:38

我剛剛遇到了同樣的問題。我能夠通過向div添加容器屬性來解決它。

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

，或者如果您使用的是「懶加載」的方法，因爲我是：

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

參考：http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

希望它可以幫助別人！

來源

2015-03-12 02:15:02 tjfo

也幫助我，長齒尋找解決方案，謝謝 – 2015-07-15 11:40:16

這應該解決問題，如果它在一個div溢出：滾動？ – mmcrae 2016-09-12 22:40:25

你的答案是無效的，因爲問題是關於datetimepicker沒有日期選擇器 – 2017-03-09 14:30:10

對我來說，這個和相關的問題都是因爲我打開了代碼檢查器窗口。普通用戶不應該這樣做，所以如果這是你的情況，這是一個沒有問題。

來源

2016-08-01 19:18:06 Marcel

這很奇怪，也許這是一個響應問題呢？ – 2017-09-26 17:02:24

如果輸入的容器位置不相對，Datetimepicker將顯示錯誤的位置。

解決的辦法是：

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

來源

2017-03-09 14:42:35

這對我有幫助，tnx – Verthosa 2017-05-05 07:46:27

在我的情況下，日期選擇器的位置是60像素高於它應該是，因爲它的div父母之一有：

~~margin-top: 60px;~~

而不是

padding-top: 60px;

來源

2017-09-26 17:23:58

Bootstrap Datepicker出現在模式不正確的位置

回答

相關問題