Tooltip Fenêtre contextuelle lorsque la souris a désactivé les dates sur Bootstrap 3 DateTimePicker v4

Question

J'ai un tableau de dates désactivées qui sont récupérées en utilisant AJAX au chargement de la page. Cependant, je voudrais afficher une fenêtre d'info-bulle qui montre "Promo Date" lorsque les dates désactivées spécifiées sont survolées. Des idées comment puis-je le faire?

$('#PickDate').datetimepicker({ 
    useCurrent: false, 
    showTodayButton: true, 
    minDate: parsedDate, 
    defaultDate: startDate, 
    format: 'DD MMM YYYY', 
    disabledDates: dDatesArray, 
    daysOfWeekDisabled: [0, 6] 
}); 

Answer 1

Toutes les dates désactivées sont marquées par la bibliothèque avec une classe .disabled.

Vous pouvez ajouter un listner pour dp.show et dp.update et vous pouvez sélectionné les dates désactivées avec jQuery ($('td.day.disabled')) et ajoutez l'attribut title (en utilisant .attr()) pour obtenir infobulle native.

Si vous souhaitez utiliser l'info-bulle Bootstrap, vous pouvez simplement appeler .tooltip(). Puisque le datetimepicker utilise un code HTML <table>, vous devez ajouter data-container="body" à votre élément. Comme le docs says:

Lorsque vous utilisez infobulles sur les éléments dans un .btn-group ou un .input-group, ou sur des éléments liés à la table (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), vous devrez spécifier l'option container: 'body' pour éviter les effets secondaires indésirables (tels que l'élargissement de l'élément et/ou la perte de ses coins arrondis lorsque l'info-bulle est déclenchée).

Voici un exemple de travail:

$('#PickDate').datetimepicker({ 
 
    useCurrent: false, 
 
    showTodayButton: true, 
 
    //minDate: parsedDate, 
 
    //defaultDate: startDate, 
 
    format: 'DD MMM YYYY', 
 
    //disabledDates: dDatesArray, 
 
    daysOfWeekDisabled: [0, 6] 
 
}).on('dp.show dp.update', function(){ 
 
    $('td.day.disabled').each(function(index, element){ 
 
    var $element = $(element) 
 
    $element.attr("title", "Promo Date"); 
 
    
 
    $element.data("container", "body"); 
 
    $element.tooltip() 
 
    }); 
 
});

<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.37/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.17.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.37/js/bootstrap-datetimepicker.min.js"></script> 
 

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