Bootstrap 3でマウスオーバーが無効になったときのツールチップのポップアップDateTimePicker v4

Question

ページロード時にAJAXを使用してフェッチされる無効な日付の配列があります。しかし、指定された無効な日付がマウスオーバーしているときに、「プロモーション日付」を示すツールチップポップアップを表示したいと思います。どのように私はそれを行うことができますアイデア？

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

Answer 1

すべての無効な日付は、.disabledクラスのライブラリによって示されます。

ネイティブツールチップを取得する（.attr()を使用して）あなたはdp.showとdp.updateのためのリスナーを追加することができ、その後、あなたはjQueryを使って無効になった日付（$('td.day.disabled')）を選択することができますし、title属性を追加します。

ブートストラップのツールチップを使用する場合は、単に.tooltip()と呼ぶことができます。 datetimepickerはHTML <table>を使用するので、要素にdata-container="body"を追加する必要があります。 docs says通り：

.btn-groupまたは.input-group、またはテーブル関連要素（<td>、<th>、<tr>、<thead>、<tbody>、<tfoot>）の内の要素にツールチップを使用して、あなたはオプションを指定する必要がありますcontainer: 'body'を使用して、望ましくない副作用（要素が広がる、ツールチップがトリガされたときに丸い角が失われるなど）を回避します。ここで

作業例：

$('#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>