モーダルポップアップウィンドウ内でブートストラップ日付とタイムピッカーを使用するにはどうすればよいですか？

Question

モーダルポップアップウィンドウ内に日付と時刻のピッカーを実装しようとしています。私は日付ピッカーを表示することができますが、モーダルウィンドウ内に時間ピッカーを表示することができません。モーダルウィンドウの後ろに表示されている時間ピッカーの入力テキストフィールドをクリックすると、ここで

は私のhtmlコードは次のとおりです。 -

HTMLコード：ここで

<div id="modal" class="modal fade in" style="display: block; margin-top:100px;" data-backdrop="static" aria-hidden="false"> 
<div class="main padder"> 
<table> 
<tr> 
    <td>    
    <input type="text" id="multiStartDate" name="multiStartDate" class="datepicker form-control" />        
    </td> 
<td> 
<input type="text" id="multiStartTime" name="multiStartTime" class="form-control timepicker"/> 
</td> 
<td> 
<input type="text" id="multiEndDate" name="multiEndDate" class="form-control timepicker" /> 
</td> 
<td> 
<a href="#" class="btn btn-md btn-orange btn-info m-r-small" id="addNewDate">Add</a> 
</td> 
</tr> 
</table> 
</div> 
</div> 

は、CSSのコードである：ここで

.datepicker { 
     z-index: 100000 !important; 
     display: block; 
    } 

    .timepicker{ 
     z-index: 100001 !important; 
    } 

はJSコードです：

私はBackbone.jsフレームを使用して作業：

私BACKBONE.JS中のSO

ビュー：

onShow : function(){ 

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

     $('#modal').modal('show'); 
     $('#multiStartTime').timepicker(); 
     }, 

Answer 1

があなたのDateTimePickerのCSSを追加し、それがレンダリングされていますが、

のようなモーダルオープンイベント内のあなたののDateTimePickerのzインデックスを増やす必要があるので、あなたのモーダルの背後にあります

$("#modal").on("show.bs.modal", function(){ 
$("#multiStartTime").css("z-index","999"); 
}); 

Answer 2

こんにちは私はあなたのフィドルを見て、私が気づいた最初のことは、日付ピッカーjsまたはtimepicker jsが含まれていなかったということでした！彼らはブートストラップには含まれていません！実際には、それぞれにcssとjsを含める必要があります。

だから私はそれがとにかく働いてしまった - 私は実際に時間を示す矢印が起こって取得していないが、あなたは真剣にGithubの上での開発のページをご覧ください、両方

のためにこれはtimepickerページへのリンクです - チェックそれアウトは

https://jsfiddle.net/RachGal/x3ek9mjx/

希望これは

レイチェル