引導嘰嘰喳喳datepicker +模態 - 日曆即將在父屏幕，而不是模態屏幕

我有一個表單（Payment.php），我使用twitter bootstrap在模態屏幕上顯示。在窗體中我有一個日期字段，我發現它的引導程序插件爲this。引導嘰嘰喳喳datepicker +模態 - 日曆即將在父屏幕，而不是模態屏幕

但問題是日曆是加載在父屏幕（Index.php），而不是實際需要的模式形式。

任何人都可以提出一個解決方案。

以下是我試過的代碼。

進口：

<link href="css/bootstrap.css" rel="stylesheet"> 
<link href="css/datepicker.css" rel="stylesheet"> 
<script src="js/bootstrap-datepicker.js"></script> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

PHP：

<div class="controls"> 
     <input data-datepicker="datepicker" class="span3" value="2012-09-13" data-date-format="yyyy-mm-dd" id="dp2" > 
     </div>

JS：

$('#dp2').datepicker();

來源

2012-09-13 DarkKnightFan

接受的答案，如果我解決你的問題：P –

添加的z-index到.datepicker類，使超過.modal

.datepicker { 
z-index: 9999; 
top: 0; 
left: 0; 
padding: 4px; 
margin-top: 1px; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; 
}

來源

2012-09-13 21:18:43

不是OP，但是我可以向大家報告這對我有效。 – crafter

同樣的問題和此修復程序爲我工作。 TKS！ – wahrheit

不幸的是不適合我（引導2.3，jquery 1.8.3，jquery ui 1.10.1，Firefox 20pre在OS X上）。在Chrome中它可以工作。 –

經過多次測試，我可以再次確認我對@ m4k答案的評論：通過CSS文件的z-index解決方案在OS X上的Firefox 19和20上不起作用。我沒有在其他瀏覽器或操作系統上進一步測試它。

其適用於我的溶液，是設置通過jQuery的UI的日期選擇器配置的z索引，如下所示：

$('#datepicker').datepicker({ 
    beforeShow: function() { $('#datepicker').css("z-index", 1051); } 
});

其中的z指數應爲模態中的一個較高（在bootstrap 2.3中，模式有1050）。

更高級的解決方案可能是調用beforeShow中的方法，該方法自動確定頁面上當前最高的z-index。在http://www.west-wind.com/weblog/posts/2009/Sep/12/jQuery-UI-Datepicker-and-zIndex你找到一個例子。

更新：自動設置的z索引1比模態更高

易於樣品如何確定的z索引是什麼底層模態的：

$("#datepicker").closest(".modal").css("z-index")

因此，beforeShow方法變成

$('#datepicker').datepicker({ 
    beforeShow: function() { 
     var $datePicker = $("#datepicker"); 
     var zIndexModal = $datePicker.closest(".modal").css("z-index"); 
     $datePicker.css("z-index", zIndexModal + 1); 
    } 
});

來源

2013-02-26 23:57:17

..沒有這個爲我工作。我正在運行引導程序2.3.2，無論我如何通過JavaScript嘗試，引導程序的JavaScript將始終將日期選擇器的z-索引重置爲（在我的情況下）21. 當然，有一種方法可以在javascript中執行此操作，但我發現CSS的方式很乾淨。

所以，這並獲得成功：

/* otherwise datepickers won't show in a modal dialog */ 
.datepicker { 
    z-index:1051 !important; 
}

來源

2013-08-06 08:41:00

對我來說也是一樣，嘗試了所有其他的，但是這個解決方案奏效了。 –

這對我有效，但我不得不使用.ui-datepicker。 .datepicker不是我的例子中的類名（不知道爲什麼）？ – JasonCoder

@JasonCoder可能你正在使用jQuery UI的日期選擇器，而不是引導程序的 –

-1

我用顯示：無;屬性爲.datepicker的CSS文件。這工作得很好。

來源

2013-10-01 18:44:35 Dennis

我遵循beforeShow方法，但必須從z-index計算的輸入中獲取最接近的模態，然後確保在作爲日曆的單獨div上設置z-index。

var DEFAULT_Z_INDEX = 10; 

$('#my-date-input') 
    .datepicker() 
    .on('show', function() { 

     // Make sure that z-index is above any open modal. 
     var $input= $(this); 
     var modalZIndex = $input.closest('.modal').css('z-index'); 
     var zIndex = DEFAULT_Z_INDEX; 
     if (modalZIndex) { 
      zIndex = parseInt(modalZIndex) + 1; 
     } 

     $('.datepicker').css("z-index", zIndex); 
    });

來源

2013-11-06 18:39:12

HTML

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-sm-2 control-label" for="textinput">Date TO</label> 
    <div class="col-sm-10"> 
     <input type="text" id="DateToP" name="DateToP" placeholder="Post Code" class="form-control datepicker"> 
    </div> 
</div>

CSS

<style type="text/css"> 
.datepicker { 
    z-index:1051 !important; 
    } 
</style>

jQuery的

$('#DateToP').datepicker({ 
     format: 'yyyy-mm-dd', 
     autoclose: true 
    });

來源

2016-09-15 04:14:36 MAFAIZ

引導嘰嘰喳喳datepicker +模態 - 日曆即將在父屏幕，而不是模態屏幕

回答

相關問題