在引導程序中插入標籤datetimepicker

Question

有沒有一種方法可以將小時/分鐘標籤添加到eonasdan的引導程序datetimepicker中，如截圖所示？

Answer 1

正如評論指出ceejayoz的的DateTimePicker不包含這種功能。該庫是開源的，您可以自定義代碼和外觀&感受建議。

另一個任務是在顯示選取器時，在小時和分鐘行的行上添加一行。您可以將一個列表添加到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具有debug選項，如果設置爲true：

將導致日期選取器停留後開一個blur事件。