2つのブートストラップ日付時間ピッカーを使用する場合のCSS z-indexのキャッチ22状況

Question

ブートストラップ日付時刻ピッカーを2つ持つHTMLフォームを使用して、開始日時とオプションの終了日時を指定できます。ピッカーは、Zインデックスの順序を除いて機能します。問題は、各ピッカーが選択されたときに最前面にある必要があることです。しかし、最初のピッカーが選択されたときに他のすべてのものの前に表示されないことが起こります。それはキャッチ22のように思える、私は両方のピッカーが相手の前にいる必要があります。

HTMLフォームの一部：

<label for="name">Start date/time</label> 
<div class="input-group date pckr" id="st-pckr"> 
    <input type="text" class="form-control" id="inp-st"> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 
<input type="hidden" id="st_dt_tm" name="st_dt_tm""> 
<label for="name">End date/time</label> 
<div class="input-group date pckr" id="end-pckr"> 
    <input type="text" class="form-control" id="inp-end"> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 
<input type="hidden" id="end_dt_tm" name="end_dt_tm"> 

CSS：

.pckr { 
    position: relative; 
    z-index: 2000; 
} 

画像：

Answer 1

なぜあなたはz-indexが必要ですか？

削除すると、最初にピッカーが2番目になります。

ところで、ここでチェックhttps://jsfiddle.net/fu2ft001/

、あなたが最後に余分な"ここにある<input type="hidden" id="st_dt_tm" name="st_dt_tm"">

更新

問題は、あなたがしようとするため、いくつかの他の要素のピッカーが表示されないということであればあなたのCSSでこれを追加：

.input-group-addon { 
    position: relative; 
    z-index: 2; 
} 

ここの例https://jsfiddle.net/fu2ft001/2/

Answer 2

あなたは01を調整してみてください日付ピッカーが選択されている場合：

$('#inp-st').click(function() { 
$(this).toggleClass('active-input'); 
} 

CSS：

.active-input { 
    z-index: 2000; 
} 

注：<div>要素は、デフォルトでフォーカスを受け取ることができない、とあなたのinput要素が隠されているので、私はコードを調整しました。 focusはまだ技術的にはより良い解決策です（フォームの要素にキーボードのナビゲーションなどでアクセスできるように）。最終コードでこれを覚えておいてください。divにフォーカスを追加する方法がありますそれはtabindex値です。