在引导程序中插入标签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事件。