2016-09-23 113 views
0

当用户单击输入字段时,我已经成功添加了引导日期选择器。我想展示一些具体的数据,当鼠标悬停在引导日期选择器上,因为airbnb是可能的吗?Bootstrap Datepicker显示弹出日期

enter image description here

编辑

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

这里是我已更新显示popover的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

我可以把一个数组的内容?图片我想每天都显示不同的价格。我怎样才能做到这一点?我每天都会从数据库中获得价格。 –