2016-09-23 7 views
0

ユーザーが入力フィールドをクリックしたときに、正常にブートストラップのdatepickerを追加しました。私は、エアバッグが可能なので、マウスがブートストラップデートピッカーに乗ったときに、特定のデータを表示したいのですか?Bootstrap Datepicker show popover on dates

enter image description here

EDIT

Here is my fiddle

HTML

<input type="text" name="start_date" id="date-from" placeholder="Check-in"> 

JS

$(document).ready(function(){ 
    //Date Pickers - Main Page 
    var nowTemp = new Date(); 
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 
    var checkin = $('#date-from').datepicker({ 
    format: 'dd/mm/yyyy', 
    startDate: '+1d', 
    weekStart: 1, 


    beforeShowDay: function (date) { 
     return date.valueOf() >= now.valueOf(); 
    }, 
    autoclose: true 

    }).on('changeDate', function (ev) { 

}); 







}); 

答えて

3

ここに私がポップオーバーを表示するように更新したJSFiddleがあります。

https://jsfiddle.net/mr3dxj5p/4/

$('body').on({ 
    mouseenter: function() { 
     $(this).popover({ 
     content: '$' + parseInt($(this).text()) * 100, 
     placement: 'top', 
     container: '.datepicker', 
     title: 'Price' 
     }).popover('show'); 
    }, 
    mouseleave: function() { 
     $(this).popover('hide') 
    } 
    }, '.datepicker .day:not(.disabled)'); 
+0

私はコンテンツへの配列を置くことができます?。 Image私は毎日異なる価格を表示したいと思います。どうすればこれを達成できますか?毎日私はデータベースから価格の価値を得る。 –

関連する問題