Insérer une étiquette à l'intérieur du bootstrap datetimepicker

Question

Existe-t-il un moyen d'ajouter une étiquette heure/minute au bootstrap datetimepicker d'eonasdan comme indiqué dans la capture d'écran?

Answer 1

Comme ceejayoz indiqué dans les commentaires, le DateTimePicker ne comprend pas ce genre de fonctionnalité. La bibliothèque est open source et vous pouvez personnaliser le code et l'aspect & se sentir comme suggéré.

Un autre app consiste à ajouter dinamiquement une ligne sous heures et minutes lorsque le sélecteur est affiché. Vous pouvez ajouter un écouteur à l'événement dp.show, puis utiliser jQuery pour manipuler le sélecteur HTML.

Voici un échantillon de travail:

$('#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 a l'option debug que, si elle est définie à true:

PROVOQUERONT le sélecteur de date de rester ouvert après un événement blur.