ブートストラップ内にラベルを挿入するdatetimepicker

Question

eonasdanのブートストラップdatetimepickerに時間/分ラベルを追加する方法はありますか？コメントで述べたようceejayoz

Answer 1

、DateTimePickerのは、この種の機能が含まれていません。ライブラリはオープンソースなので、コードと外観をカスタマイズすることができます&提案通りです。

もう1つの方法は、ピッカーが表示されているときに時間と分の行をdinamically追加することです。リスナーをdp.showイベントに追加し、jQueryを使用してピッカーのHTMLを操作できます。ここで

ワーキングサンプル：

日付ピッカーは、後に開いたままになります：

$('#datetimepicker1').datetimepicker({ 
 
    format: 'HH:mm' 
 
}); 
 

 
$('#datetimepicker1').on('dp.show', function(){ 
 
    // Check timepicker is visible 
 
    if($('.timepicker').is(':visible')){ 
 
    // Get rows of the timepicker 
 
    var rows = $('.timepicker>.timepicker-picker>table>tbody>tr'); 
 
    // Create html for custom text 
 
    var tr = '<tr class="customText"><td>hours</td><td class="separator"></td><td>minutes</td></tr>'; 
 
    // Add custom HTML inside component 
 
    $(rows[1]).after(tr); 
 
    } 
 
});

.bootstrap-datetimepicker-widget table tr.customText td { 
 
    height: 24px; 
 
    line-height: 24px; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 

 
<div class='input-group date' id='datetimepicker1'> 
 
    <input type='text' class="form-control" /> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div>

のDateTimePickerはtrueに設定した場合、そのdebugオプションがありblurイベント。